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Preface 


Ionic Framework By Example is a step-by-step guide that covers the very basics of Ionic 
aiming to equip the reader with all the necessary knowledge needed to understand 
and create Ionic apps. You will start off by learning a bit about the history of Ionic, 
and then slowly learn to get it set up and work with its great features. You will learn 
to work with Ionic and create four different Ionic apps, with each app teaching you 
different important features of Ionic. You will also learn to connect your app to a 
database using Firebase. This book will also provide you with links to some great 
resources to further your quest for more advanced Ionic knowledge. 


What this book covers 


Chapter 1, First Look at Ionic, covers a brief history of lonic and aims to make the user 
understand exactly what Ionic is, briefly exposing some of its features to the user. 
This chapter will also teach you how to set up Ionic on your computer. 


Chapter 2, To-Do List App, will help the reader to create their first lonic application, 
a simple to-do list application. The user will also write their very first lines of Ionic 
code and get to understand what an Ionic project looks like. 


Chapter 3, Running Ionic Apps, equips you with the necessary knowledge of how 
to see your Ionic apps in action in different ways. You will run and test your app 
on a browser, on a mobile device using the Ionic view app, and also on a real 
mobile device. 


Chapter 4, Ionic Components, teaches some really cool components that are part of 
Ionic. You will create a more advanced to-do list application that will have some Ionic 
components that will enable you to create some complex list items in your application. 


Chapter 5, The London Tourist App, creates a new type of Ionic application. You will 
create an application that will hold some very cool tourist destinations in the city 
of London. 
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You will also learn to query data from a JSON resource and consume this data in 
your application. 


Chapter 6, Advanced Ionic Components, helps the reader learn to implement some more 
advanced Ionic components. You will learn to implement Ionic Popover and Modal 
windows in your application. 


Chapter 7, Customizing the App, focuses on customizing an Ionic application. The Ionic 
SDK comes by default with some great tools that make it easy to customize your 
application to fit the design guides of your brand. 


Chapter 8, Building a Simple Social App, focuses on learning how to create an Ionic 
application that has tabs using the Ionic tabs template. You will also have a look at 
some of the things that make up the tabs template and learn how to add features to it. 


Chapter 9, Connecting to Firebase, focuses solely on learning how to use Firebase to 
integrate a backend to our Ionic application. You will also be using the tabs-app that 
we created in Chapter 8, Building a Simple Social App, to learn to integrate Firebase into 
our application. 


Chapter 10, Roundup, gives an overview of the important things that we haven't 
covered yet about Ionic that you might find very useful. You will also learn some 
useful tips about Ionic and discover some great tips on how to make even better use 
of Ionic to develop great apps. 


What you need for this book 


Firstly, you will need a Windows, Linux, or Mac computer to follow the code 
samples in this book. A beyond basic or intermediate knowledge of JavaScript and 
HTML5 is certainly essential to understand concepts discussed in this book. A basic 
understanding of Cordova is expected at the very least. You are expected to also 
have an idea of how to issue commands in a terminal window. You should also 
have access to a working Internet connection, and a Google account is necessary for 
Chapter 9, Connecting to Firebase. 


Who this book is for 


This book is aimed at individuals looking to learn how to create hybrid mobile 
applications with Ionic. This book is perfect for current web developers with beyond 
basic familiarity of HTML5 and JavaScript. AngularJS developers will also feel at home 
reading this book as Ionic is built with AngularJS. Native iOS and Android developers 
with a good understanding of HTML5 and JavaScript will also benefit highly from this 
book and gain knowledge on how to create hybrid mobile apps. 
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Conventions 


In this book, you will find a number of text styles that distinguish between different 
kinds of information. Here are some examples of these styles and an explanation of 
their meaning. 


Code words in text, database table names, folder names, filenames, file extensions, 
pathnames, dummy URLs, user input, and Twitter handles are shown as follows: 
"You will also notice that in your www/1ib folder, there is a folder called ionic that 
contains all the required files to run Ionic." 


A block of code is set as follows: 


<div class="list"> 
<div class="item item-input-inset"> 
<label class="item-input-wrapper"> 
<input type="text" placeholder="enter todo item"> 
</label> 
<button class="button button-small"> 
Add 
</button> 


</div> 
Any command-line input or output is written as follows: 
ionic serve 


New terms and important words are shown in bold. Words that you see on the screen, 
for example, in menus or dialog boxes, appear in the text like this: "Scroll down to the 
More Tools options and select the Developer Tools option, as shown in the following 
screenshot." 


| Warnings or important notes appear in a box like this. | 


al 


Q Tips and tricks appear like this. 
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Reader feedback 


Feedback from our readers is always welcome. Let us know what you think about 
this book— what you liked or disliked. Reader feedback is important for us as it helps 
us develop titles that you will really get the most out of. 


To send us general feedback, simply e-mail feedback@packtpub.com, and mention 
the book's title in the subject of your message. 


If there is a topic that you have expertise in and you are interested in either writing 
or contributing to a book, see our author guide at www. packtpub.com/authors. 


Customer support 


Now that you are the proud owner of a Packt book, we have a number of things to 
help you to get the most from your purchase. 


Downloading the example code 


You can download the example code files from your account at 

http: //www.packtpub.com for all the Packt Publishing books you have purchased. 
If you purchased this book elsewhere, you can visit http: //www.packtpub.com/ 
support and register to have the files e-mailed directly to you. 


Errata 


Although we have taken every care to ensure the accuracy of our content, mistakes 
do happen. If you find a mistake in one of our books — maybe a mistake in the text or 
the code—we would be grateful if you could report this to us. By doing so, you can 
save other readers from frustration and help us improve subsequent versions of this 
book. If you find any errata, please report them by visiting http: //www.packtpub. 
com/submit-errata, selecting your book, clicking on the Errata Submission Form 
link, and entering the details of your errata. Once your errata are verified, your 
submission will be accepted and the errata will be uploaded to our website or added 
to any list of existing errata under the Errata section of that title. 


To view the previously submitted errata, go to https: //www. packtpub.com/books/ 
content /support and enter the name of the book in the search field. The required 
information will appear under the Errata section. 
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Piracy 

Piracy of copyrighted material on the Internet is an ongoing problem across all 
media. At Packt, we take the protection of our copyright and licenses very seriously. 
If you come across any illegal copies of our works in any form on the Internet, please 
provide us with the location address or website name immediately so that we can 
pursue a remedy. 


Please contact us at copyright@packtpub.com with a link to the suspected 
pirated material. 


We appreciate your help in protecting our authors and our ability to bring you 
valuable content. 


Questions 


If you have a problem with any aspect of this book, you can contact us at 
questions@packtpub.com, and we will do our best to address the problem. 
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First Look at lonic 


Before we begin this book, it is very important that we understand just exactly what 
we are dealing with. The best way to understand this is by having a short history on 
mobile development, in general, and understand how tools like Ionic help mobile 
developers create beautiful mobile apps. 


The beginning 

The year 2006 saw the beginning of the smartphone era with the launch of the 

iPhone by Apple. By 2008, Google had launched its answer to Apple's iOS operating 
system. This new operating system was called Android, and by 2010, it was clear that 
smartphones running iOS and Android dominantly covered the mobile ecosystem. 
Fast forward to today, the dominance of iOS and Android is not so different even 
though Windows for mobile by Microsoft has made some gains on the mobile front. 

It is fair to say that Android, iOS, and Windows make up the majority of the ecosystem 
with the first two at the forefront by a large margin. 


The launch of the smartphone era also gave birth to the concept of mobile 
applications. Mobile apps are the medium by which we deliver and obtain most 

of our content on mobile phones. They are great and everyone with a smartphone 
pretty much has a number of apps downloaded on their devices to perform specific 
actions or achieve specific goals. This was massive for developers, and the software 
vendors also provided tools that enabled developers to create their own third-party 
mobile apps for users. We refer to these applications, built using the tools provided 
by the software vendors, as native mobile applications. 
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The problem 


As great as mobile apps are, there is a small problem with how they are developed. 
Firstly, for each mobile development platform, the software vendor provides its 
own unique set of tools to build applications for its platforms. We know these tools 
as SDKs. The following table shows how each platform differs in terms of tools and 
SDK options to create native mobile apps for their ecosystems: 


Operating system SDK Programming language 
iOS iOS SDK Objective-C/Swift 


Android Android SDK JAVA 
Windows for mobile | Windows SDK 


To make a clear statement, we are not trying to downplay the use of native tools. As 
noted earlier, native tools are great but come with a great cost and time constraint. 
Firstly, you are unable to build the same app for different platforms with the same set 
of tools. For the Android version of your app, you will need a team of skilled android 
developers. For the iOS version of your app, you will need a team of Objective-C or 
Swift developers to create the iOS version of the same app. Also, there is no code 
sharing between these two teams, meaning that a feature developed on one platform 
will have to be completely developed on the other platform again. This is highly 
inefficient in terms of development and very time consuming. 





Another problem is that because you are hiring two separate teams that are 
completely independent of one another even though they are both trying to create 
the same thing, you are left with a growing cost. For example, if you decided you 
wanted to create a Windows for mobile version of your mobile app, you will need 
to recruit another team of .NET developers and they will have to build everything 
present on the other existing platforms from scratch since they cannot reuse any of 
the already built tools. 


For a company like Facebook, which makes revenue in the billions, it might make 
sense to go down the native path as cost and talent for native development would 
probably not be a part of their concern. However, for the most part, not everyone 
building or trying to build a mobile app is a company like Facebook. Most people 
want to get a simple, great, powerful app out there as quick as possible. Furthermore, 
some of these people want to use their preexisting skill set to build apps for multiple 
platforms without having to learn new programming languages. 
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Before mobile applications, web apps ruled the world for the most part. We had 
more people developing for the web technologies consisting mostly of HTML, CSS, 
and JavaScript. One great thing we got used to with the web was that it was platform 
independent. This meant that as long as you had a browser application on any 
device, you were able to interact with any web application without any problem. 
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So when mobile apps came, it was a big change for most web developers because 
with mobile apps, each platform was self-dependent, and apps made for one 
platform would not work for another platform. 


Apache Cordova 


Apache Cordova is a technology that lets any web application be packaged as a 
native mobile application while also providing access to device features. Thanks to 
Adobe and the open source community, this technology has seen great growth over 
the years and more and more apps are being built with Cordova. The apps built with 
Cordova are commonly referred to as hybrid applications. But what is a hybrid app? 
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A hybrid application in the context of Cordova is actually a web app that lives within 
the thin container of a native mobile application. 


In reality, the only difference between a native mobile app and a web application 
in terms of what they can do is the fact that the native mobile app has access to the 
device hardware features. 
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In truth, a hybrid app is actually a native app that serves up a web application on the 
phone's web view. It behaves and acts like a normal application and has complete 
device access, thanks to Cordova. 


However, the main advantage that Cordova has over native development techniques 
is that you only have to maintain one code base, and can use that same code base to 
build applications for multiple platforms. This was and still is the main selling point 
of Cordova to date, as with this technique you are provided with a big cost and time 
saving advantage. 


Early hybrid apps 

When the first few hybrid apps started rolling out, there were a couple of problems 
that seemed to persist. The first problem was that a lot of people complained that 
these hybrid applications did not have the same user interface and user experience 
as native mobile apps. The major reason for this was that when building a native 
app, all the building blocks are already provided for you. For example, we have 
things like pre-provided animations, swipe gestures, tabs, and so on. Hybrid 

apps failed to provide similar features like these because on the web, all we 

have is HTML, CSS, and JS. There is no pre-provided component for things like 
animations, gestures, and tabs. 
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This meant that pretty much anyone trying to build a hybrid app had to build these 
features from scratch. This was not very good and different people had different 
implementations of the same features. As a result, a lot of applications that were 
built by the hybrid way were not so visually appealing. What we needed was a 
framework that was centrally maintained that provided us with all the tools we 
needed to build features that native apps had with web technologies. 


What ts lonic? 


Ionic is a framework that lets you build hybrid mobile applications with web 
technologies like HTML5, CSS, and JavaScript. But that is not where it stops with 
Ionic. Ionic provides you with components that you can use to build native-like 
features for your mobile applications. Think of Ionic as the SDK for making your 
Hybrid mobile application. Most of the features you have on a native app such as 
modals, gestures, popups, and many more, are all provided to you by Ionic and 
can be easily extended for new features or customized to suit your needs. 


Ionic itself does not grant you the ability to communicate with device features 
like GPS and camera; instead, it works side-by-side with Cordova to achieve this. 
Another great feature of Ionic is how loosely coupled all its components are. You 
can decide to use only some of Ionic on an already existing hybrid application if 
you wish to do so. 


The Ionic framework is built with AngularJS, which is arguably the most well-tested 
and widely-used JavaScript framework out there. This feature is particularly 
powerful as it gives you all the goodness of Angular as part of any Ionic app you 
develop. In the past, architecting hybrid applications proved to be difficult, but with 
Angular, we can create our mobile applications using the Single Page Application 
(SPA) technique. Angular also makes it really easy to organize your application for 
the development and working across teams while providing you the possibility of 
easily adding custom features or libraries. 


Short history of lonic 


Before we dive in, first let's revisit what we already know about hybrid applications 
and how they work. Remember that a hybrid mobile application is simply a web 
application that runs in a web view, within a thin native wrapper environment. 
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Also remember that native apps came with already built components that enabled 
you to create beautiful user interfaces for mobile applications. Since hybrid apps 
used web technologies, there was no SDK or components provided for creating 
mobile UIs. The Ionic team saw this problem and created a solution in the form of the 
Ionic framework. The Ionic framework provides UI components to build beautiful 
hybrid applications. 


Features of lonic 


Ionic provides you with a lot of cool neat features and tricks that help you create 
beautiful and well functioning hybrid apps in no time. The features of Ionic come 
under three categories: 


e CSS features 
e JavaScript features 
e [onic CLI 


CSS features 


To start off, Ionic comes stock with a great CSS library that provides you with 
some boilerplate styles. These Ionic CSS styles are generated with SASS, a CSS 
preprocessor for more advanced CSS style manipulation. 


Some of the cool CSS features that come built-in with Ionic include: 


e Buttons 


e Cards 
e Header and footers 
e Lists 


e Forms elements 


e Grid system 


All these features and more, are already provided for you and are easily customizable. 
They also have the same look and feel that native equivalents have so you will not 
have to do any editing to make them look like native components. 
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JavaScript features 

The JavaScript features are at the very heart of the Ionic framework and essential for 
building Ionic apps. They also consist of other features that let you do things from 
under the hood like customize your application or even provide you with helper 
functions you can use to make developing your app more pleasant. A lot of these 
JavaScript features actually exist as HTML custom elements that make it easy to 
declaratively use these features. 


Some of these features include: 


e Modal 
e Slide box 








e Action sheet 
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e Side menu 





Check-in 


Attendees 


e Tabs 


Example of konic tabs. Navigate to tach 
tab, and navigate to child views of each 
tab and notices how each tab has its own 
navigation history, 


Scientific Facts > 





[8] 


Chapter 1 


Complex lists 


Reorder 
List Item 0 
List Item 1 


List Item 2 


Edit Share 


List Item 4 


List Item 5 


List Item 6 


List Item 7 


List Item 8 








Collection repeat 


All the JavaScript features of Ionic are built with Angular, and most can be easily 
plugged in as Angular directives. Each of them also perform different actions that 
help you achieve specific functions and are all documented in the Ionic website. 


The lonic CLI 


This is the final part that makes up the three major arms of the Ionic framework. 

The Ionic CLI is a very important tool that lets you use the Ionic commands via the 
command line/terminal. It is also with the Ionic CLI that we get access to some Ionic 
features that make our app development process more streamlined. It is arguably the 
most important part of Ionic and it is also the feature you will use to do most actions. 


Ionic CLI features let you do the following: 


Create Ionic projects 
Issue Cordova commands 
Development and testing 


Ionic splash/Icon generator 
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e Ionic labs 
e SASS 
e Upload app to Ionic view 


e Access Ionic.I0 tools 


The Ionic CLI is a very powerful tool and most of the time, it is the tool we will be 
using throughout this book to perform specific actions. This is why the first thing we 
are going to do is set up the Ionic CLI. 


Setting up Ionic 


The following steps will give a brief of how to setup Ionic: 


1. Install NodeJS: To set up Ionic, the first thing you will need to do is to install 
NodeJ5 on your computer so you can have access to Node Package Manager 
(NPM). If you already have node installed on your computer, you can skip 
this step and go to step 2. To install NodeJS on your computer, perform the 
following steps: 


1. Go to www.nodejs.org and click on the latest stable version for 
your computer. That should download the latest version of NodeJS 
on your computer. Don't worry if you are on Mac, PC, or Linux, 
the correct one for your operating system will be automatically 
downloaded. 


2. After the download is finished, install the downloaded software on 
your computer. You might need to restart your computer if you are 
running Windows. 


3. Open up the terminal if you are on Mac/ Linux or the Windows 
command line if you are on a Windows machine. Type the command 
node -v and press Enter. 


You should see the version number of your current installation of NodeJS. 
If you do not see a version number, this might mean that you have not 
correctly installed NodeJS and should try running step 1 again. 


2. Install Ionic CLI: The next step is to use NPM to install the Ionic CLI. 


1. Opena new terminal (OS X and Linux) or command-line (Windows) 
window and run the following command: npm install ionic -g. 
If you are on Linux/OS X, you might need to run sudo npm install 
ionic -g. This command will aim to install Ionic globally. 
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2. After this has finished running, run the command ionic -v on your 
terminal/command line and press Enter. 


You should see a version number of your Ionic CLI. This means that 
you have Ionic installed correctly and are good to go. If you are ona 
Windows machine, you might need to restart your machine to see the 
version number appear. 


If you did not see a version number, then you do not have Ionic installed 
correctly on your machine and should do step 2 again. 


Summary 


In this chapter, we started off by getting to know a bit of background about mobile 
applications in general. We learned how native mobile applications work, how 
they are built with native SDKs, and how each platform is built with a completely 
different set of tools without any resource sharing between them all. We then went 
ahead and discussed briefly about Apache Cordova and how it aimed to solve the 
problem of cross-platform development. 


We then discussed exactly what Ionic means and what problems it aims to 
solve. We also got to discuss the CSS, JS, and Ionic CLI features of the Ionic 
framework lightly. 


In the next chapter, we will be creating our very first lonic application with the 
Ionic CLI, and we will create a nice to-do list style application with some great 
Ionic features. 
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In this chapter, we will be diving headfirst into Ionic and will be using a lot of the 
Ionic CLI tool. We will create our first Ionic application and add some basic Ionic 
features to our app. We will also get to run our app for the first time using Ionic and 
will debug our app in Chrome. We will finish this chapter by creating a to-do list 
application with Ionic. This application will simply let us add items to our app and 
also provide us a way of deleting these items or marking them as done. 


Creating our first application 


Creating a new project with Ionic is actually a very pain-free experience with the 
Ionic CLI. There are different ways to create a new Ionic project but the easiest and 
more standard technique is to use the Ionic templates. This is by far the easiest way, 
and it let us use any of the three standard templates provided by Ionic. 


These templates include: 
¢ The blank template: This creates a new project with some boilerplate code 
to help you get set up with a blank application 


e The tabs template: This is the same as the first but instead of a blank 
application, you get an application with a tabbed design 


e The side menu template: This creates a new application with a side menu 
design and some boilerplate 
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We will be using each of these in this book at some point of time. For now, we are 
going to start with the first and create a brand new Ionic project using the blank 
template. Before we move on, let's have a look at the command that the Ionic CLI 
uses to create a new application: 


ionic create [Name Of App] [template] 


The create command for the Ionic CLI allows us to provide two parameters, the 
first being the name we want our app to be called. This first parameter will also be 
the name given to the folder that gets generated with our files. The second parameter 
is the template name. As discussed earlier, there are three template styles. You 

can either pass in blank, tabs, or side menu as a parameter to represent the type of 
template you want your app to be generated with. 


Creating our to-do list app 


We are going to create our to-do list application. We are going to use the blank 
template to do this. We will be calling our app todo for the sake of consistency. 
To create the todo app, go ahead and run the following command: 


ionic start todo blank 


This command will create a new blank Ionic application called todo. When this 
command has finished running, enter the project of your application via the 
command line by running the following command: 


cd todo 


To further explore our newly created todo app, open the todo app folder in your 
favorite IDE. 


The lonic workflow 


When you create a new Ionic project, there are a couple of folders and files that come 
as stock as part of the generated project. Your directory should look similar to what 
is seen in the following screenshot: 
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SCSS 
SASS jonic.app.Scss 
www 

Css 


js 
lib 
[M index.html 

ISON .bowerrc 
B) .editorconfig 
Q .gitignore 
i= bowe r.json 
<> config.xml 
Es gulpfile.js 
5 ionic.project 


EN package.json 





The structure you see is pretty much the same as in every Cordova project, with the 
exception of a few files and folders. For example, there is a scss folder. This contains 
a file that lets us customize the look and feel of our application and will be covered 
in detail in later chapters. There are also the platforms and plugins folder. The 
platforms folder, in most cases is auto-generated, but we will not be covering them 
in this book so you can ignore them for the time being. 


You will also notice that in your www/lib folder, there is a folder called ionic that 
contains all the required files to run Ionic. There are css, fonts, js, and scss folder. 
e css: This folder contains all the default CSS that come with an Ionic app. 


e fonts: Ionic comes with its own font and Icon library called Ionicons. This 
Ionicons library contains hundreds of icons, which are all available for use in 


your app. 
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js: This contains all the code for the core Ionic library. Since Ionic is built 
with Angular, there is a version of Angular here with a bunch of other files 
that make up the Ionic framework. 


scss: This is the folder that contains SASS files that are used to build the 
beautiful Ionic framework CSS styles. Everything here can be overwritten 
easily in order to make your app feel a bit more customized and we will 
discuss how you can do this in Chapter 7, Customizing the App. 


If you have a look at the root folder, you will see a lot of other files that are generated 
for you as part of the Ionic workflow. These files are not overly important now, but 
let's have a look at the more important ones in the following list: 


bower. json: This is the file that contains some of the dependencies acquired 

from the bower package manager. The browser dependencies are resolved in 
the 1ib folder as specified in the bowerrc file. This is a great place to specify 

other third-party dependencies that your project might need. 


config.xml: This is the standard config file that comes along with any 
Phonegap/ Cordova project. This is where you request permissions for device 
features and also specify universal and platform-specific configurations for 
you app. 

gulpfile: Ionic uses the Gulp build tool, and this file contains some code 
that is provided by Ionic that enables you do some amazing things. We will 
use some features of this file in Chapter 7, Customizing the App, when we do 
some customization tasks. 


ionic.project: This is a file specific for Ionic services. It is the file used by 
the Ionic CLI and the ionic.I0 services as a place to specify some of your 
Ionic-specific configuration. We will use some of the features of this file when 
we use the Ionic view app in Chapter 3, Running Ionic Apps. 


package .json: This is a file used by node to specify some node 
dependencies. When you create a project with the Ionic CLI, Ionic uses 

both the Node and Bower Package Manager to resolve some of your 
dependencies. If you require a node module when you are developing Ionic 
apps, you can specify these dependencies here. 


These files are some of the more important files that are by default a part of a project 
created with the Ionic CLI. At the moment you do not need to worry too much about 
them, but it's always good to know that they exist and have an idea about what they 
actually represent. 
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In-depth look at our project 


Before we go ahead and do any development, it is imperative that we understand 
how to actually add features to our app and where to do this. There are two files in 
particular that we are going to pay great attention to: 


e index.html: This file is the entry point of your application in terms of what 
you actually see. It is a normal HTML page with some boilerplate code 
based on the blank Ionic template. If you pay close attention, you will see 
some custom HTML tags such as <ion-pane>, <ion-header>, and <ion- 
content >. These custom tags are actually Ionic components that have been 
built with Angular, and for now, you need not worry about what they do as 
we will be discussing this shortly. A closer look at the <body> tag will also 
reveal the attribute ng-app=starter. This is a custom attribute provided 
by Angular, which we use to provide the name of the main module of an 
angular application. 


e app.js: This file lives in the js folder, and this is the file that contains the 
main module of our application. In Angular, modules provide us a way to 
create isolated chunks of code that our application uses. The main module is 
the module that actually gets loaded to our application when it starts. Think 
of the main module as the entry point of our application. If you take a closer 
look at the app. js file, you will see how we create the module and specify its 
name as Starter: 


angular.module('starter', ['1ionic'] ) 


.run(function(SionicPlatform) { 
SionicPlatform.ready(function() { 

// Hide the accessory bar by default (remove this to 

show the accessory bar above the keyboard 

jf} Tor form inputs) 

if (window.cordova && window.cordova.plugins.Keyboard) { 
cordova.plugins.Keyboard 
.hideKeyboardAccessoryBar (true); 

} 

if (window.StatusBar) { 
StatusBar.styleDefault (); 


\); 
}) 


fg, a 
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Downloading the example code 


my You can download the example code files from your account at 
http: //www.packtpub.com for all the Packt Publishing books 
Q you have purchased. If you purchased this book elsewhere, you 
can visit http: //www.packtpub.com/support and register 
to have the files e-mailed directly to you. 


You will also see that it takes a second parameter, an array which contains 
one string called ionic. In Angular, this array is used to provide the names 
of any module that our application depends on. So, just like we specified the 
name of our main module, starter to the ng-app attribute in the index.html 
file, we specify a list of modules that our main module relies on, in this case, 
ionic. 

You would have also noticed a run function in the app. js. This function 

is the function that fires as soon as our app is ready and all our dependent 
Angular modules and factories have loaded. The run function is a great 
place to do little pieces of tidying up that you want done as soon as your 
application begins. 


These two files are the ones you need to worry about as they are the two main files 
we will be working with in order to build our to-do list application. 


Envisioning our app 


It is always good to do a small bit of wireframing before you build any application. 
This enables you to understand how the app will work and how it will probably look 
just before you actually begin to code the app. The following screenshot is a rough 
wireframe of what our todo app will look like: 
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Our todo application allows a user to simply enter any task they want added to their 
to-do list. Think of this app as a mini diary where you put in things you want done 
later. In this section, we will only be building the very basic feature of our todo app, 
and we will only be allowing the user to add new items. In later chapters, as we learn 
more about Ionic, we will be adding more complex features like using a complex list 
and also letting the user edit, remove, and even archive to-do list items. 


Building our todo app 


To get started with building our todo app, we will need to further break down what 
we want to achieve into smaller steps. The first thing we need to do is to create the 
UI for our application. 


Creating the UI 


The first thing we are going to do to get started with building our todo application is 
building the user interface. We are going to build the input form and the button that 
will add the todo item currently typed in the input. After we have written the code 
for this, we will add the markup for the list where we want any entered todo item to 
be displayed. I have already compiled this markup for you in the following code: 


<div class="list"> 
<div class="item item-input-inset"> 
<label class="item-input-wrapper"> 
<input type="text" placeholder="enter todo item"> 
</label> 
<button class="button button-small"> 
Add 
</button> 
</div> 
</div> 
<ul class="list"> 
<li class="items> 


</li> 
</ul> 


From the preceding code, you can see the skin of our user interface ready. We have 
an input that receives what we want entered into our to-do list. We have an HTML 
unordered list that will be placed where our to-do list items will be situated. You 
can see some classes on some of our elements. These are actually classes from the 
auto-generated Ionic CSS styles that come as part of any Ionic project. 
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The code 


Since we have written the user interface for our application, we will also need to 
write the Angular code to enable it to work. What we need to do is to create an 
array that will hold the list of todo items and also create a function that will add a 
todo item into this list anytime we click the Add button we created earlier. We will 
achieve this all by creating an Angular controller in our main module and insert all 
this logic into it. I have already written this code and you can copy it and get it into 
your project from the following: 


.controller('TodoController', function (Sscope) { 

Sscope.todos = []; 

S$scope.todoModel = {}; 

Sscope.todoModel.todo = ''; 

S$scope.addTodo = function () { 
Sscope.todos.push($scope.todoModel.todo) ; 
S$scope.todoModel = { 

todos. + 


E 
}) 


From the preceding code, you can see that we have created a controller called the 
TodoController. Within this TodoController, we have a todos array. This is the 
array that will hold all our todo items. We also have a todoMode1 object that is an 
empty object that will hold our entered todo item. Lastly, we have a function called 
addTodo that adds the current value in our todoModel object to our todos array and 
then sets the value of our current todoModel object to an empty string so we can type 
from scratch again. 


Wiring things up 
Now that we have created our user interface boilerplate code and also written our 
code for it, it is time to wire the two together and dictate what gets to appear where: 


<lon-content ng-controller="TodoController"> 
<div iclass="lise'> 
<div class="item item-input-inset"> 
<label class="item-input-wrapper"> 
<input type="text" placeholder="enter todo item" 
ng-model="todoModel .todo"> 
</label> 
<button class="button button-small" ng- 
click="addTodo ()"> 
Add 
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</button> 
</div> 
</div> 
<ul wWlass="lise"sS 
<li class="item" ng-repeat="todo in todos track by 
Sindex"> 
{ {todo} } 
</li> 
</ul> 
</ion-content> 


If you have a look at the preceding code, you will see that the UI code now looks 
a bit different. Firstly, we have associated our <ion-content> element with our 
TodoController. This is done in order to create a binding context, meaning any 
variable within the TodoController is now available for data binding to all its 
descendants. Secondly, you will also notice that our input now has a new ng- 
model attribute that binds to our todoModel variable from our TodoCont roller. 
This is binding the value of the input tag at any point in time to the todoModel 
object. Thirdly, we have set an ng-click attribute on the add todo button to ensure 
that any time it is clicked, a new todo item is added to our array. Finally, we have 
done an ng-repeat within the UL element to specify that we want all children of 
the todo array to be rendered with the LI. 


With this, we have successfully completed the todo application and all that is left 
is to see it in action. We will be learning how to run this application we have just 
built-in different ways in the next chapter, so do follow up to learn how to get your 
app to run and test it live. 


Summary 


In this chapter, we got to create our very first Ionic application using the Ionic 
blank application template. We had a look at what the Ionic workflow looks like 
and also got to see some of the files that make up the workflow. We then dived 

in and discussed about how we intended to build our to-do list application. We 
further went ahead and actually implemented the UI of our to-do list app based 
on a wireframe. We wrote some Angular code and wired it up to the user interface 
we created. 


In the next chapter, we will learn different ways to run and test our application 
for the very first time with the Ionic CLI. 
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In this chapter, we are going to learn how to test and run our Ionic application using 
various methods. We will start by learning to test our application using the simplest 
Ionic technique: by serving our app to the Chrome browser using the ionic serve 
command. We will then go ahead and use the Ionic view mobile app for iOS/ 
Android to see how we can test our application on a mobile device. Lastly, we will 
learn to run and deploy our Ionic application to a mobile device using the traditional 
build system of the native SDKs of our respective platforms. 


Running our todo app 


In the last chapter, we created our first Ionic application using the Ionic blank template. 
We worked on the application further, and made a to-do list app. We wrote some 
Angular code and had some initial exposure to some Ionic code. However, we did not 
get to see our application in action. There are many ways by which we can run an Ionic 
app, and the first technique we will be learning is the ionic serve technique. 


The ionic serve technique 


The ionic serve technique is the simplest way to see your app in action. It requires 
no extra setup after the Ionic CLI, and only requires you to have a web browser. We 
are now going to test our todo application, which we created in the preceding chapter 
using the ionic serve technique. To test your application with this technique, simply 
open a new command-line window and follow the following steps. 
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Browser choice 
Al It is advisable that you use Google Chrome as your default browser. 
` Google Chrome has some very powerful development tools and all 
Q exercises in this book expect that you have Google Chrome installed 
as your default browser. You can download a copy of Google Chrome 
by visiting this URL: http: //www.google.com/chrome. 


1. From your terminal, navigate to the root directory of your Ionic todo 
application. 


2. Run the following command in your command-line window: 


ionic serve 


In case you are prompted to select an IP address, you can select any 
~~ one from the list prompted and press Enter to initiate. 


If you followed the steps correctly, you should see a browser window come up with 
your app running in it. You will also notice that the command-line window where 
you typed the command has some things going on within it. 


With this, we have successfully served our application to the browser and can test 
our Ionic application like any other web application on Chrome. The great thing 
about this technique is the fact that no extra setup is required, and all you need is just 
Ionic CLI and the Chrome browser installed on your machine. 


Emulating with Chrome 


Even though our application is served on the Chrome browser, it is fullscreen and is 
served like a normal fullscreen web app. This is not ideal for us, as our application 
is a mobile application. Luckily, Chrome has a neat emulation tool that lets you 
emulate your application as if it were running on a normal mobile phone. 
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To use Chrome's emulation feature, follow the following steps. 


These steps assume that you already have your app served on the 
Chrome browser and you are currently on the tab that it is served on. 





1. Click the Chrome menu icon, as shown in the following screenshot: 
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2. Scroll down to the More Tools options and select the Developer Tools 
option, as shown in the following screenshot: 
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3. Click the Device Mode toggle icon, as shown in the following screenshot: 
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This should bring up the Chrome emulator window with your app running on it. 
You might need to refresh the page for it to render the app correctly. If you have a 
look at the window, you will see a dropdown menu on the upper-left corner that has 
a list of devices that you can emulate. I normally recommend using the Nexus 5 for 
testing Android and the iPhone 6 for iOS. The reason for this is that the resolution 

of the Nexus 5 eclipses many of the Android phones available today so using it as a 
basis makes a lot of sense. The same goes for the iPhone 6 as well; since it is Apple's 
flagship device at the time of writing, it makes sense to use it for emulation. 
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You can fully interact with your app as if it were running in an emulator. You also 
have the full power of the Chrome developer tools to inspect elements and see how 
the code of your application is represented. Why don't you have a go with your app 
and try and add some to-do list items and see them populating. 


lonic serve labs 


There is another flavor in the ionic serve technique that lets us see our app the 
way it looks on both iOS and Android simultaneously. This technique is called the 
Ionic labs technique. 


al 


- This technique should only be used to view your app and is 
not intended to be used for debugging. 


To view your app using the Ionic labs technique, simply follow the following steps. 


technique, simply press Q to quit the current session or close 
the command-line window and open a new one. 


Q If you are already viewing your app using the ionic serve 
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Make sure you are in the root folder of your project. 


2. Enter the following command in your terminal: 


ionic serve --lab 


Android 


lonic Blank Starter lonic Blank Starter 





Running this should bring up a new browser window the same way as it did the first 
time when we ran the ionic serve command; only that this time, you will see two 
emulations for your app, one for iOS and one for Android, as shown in the preceding 
screenshot. This is a really nice way to see your app running in action on both 
platforms simultaneously. Ionic has a term called Continuum which you will see 

in action in later chapters. This phenomenon refers to the fact that certain elements 
look different on different platforms. For example, tabs on iOS are normally placed 
on the bottom, while on Android, they are traditionally positioned on the top. Ionic 
offers us these features out of the box with a further way to override these behaviors. 
The ionic serve technique is a great way to see the features like the tab positioned 
differently on different platforms simultaneously. 


The lonic view 


Another technique to view an Ionic app is by using the Ionic view application. 

The Ionic view app is a mobile application created by Ionic with Ionic framework 
available on iOS and Android. The application is used to view any Ionic application 
you are developing and works hand-in-hand with the Ionic IO platform. The Ionic 
IO platform is a suite of tools that Ionic provides for some extra services like push 
notifications, analytics, and so on. 
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Testing todo app with the lonic view 


In order to use the Ionic view app, you must have an iOS or Android device. 

You must also possess an Ionic IO account. Navigate to http: //apps.ionic.io to 
create your Ionic IO account. Go ahead and download the Ionic view app by visiting 
http: //view.ionic.io on your mobile device and downloading the correct version 
for your mobile device. 


In order to test our todo application, follow the following steps to test it with the 
Ionic view app: 


1. Open a terminal window and navigate to the root folder of your todo 
application from Chapter 2. 


2. Simply enter the following command on your terminal: 


ionic upload 


This command will request the e-mail and password details of your Ionic IO account. 
Enter these details when prompted and if the app uploaded correctly, you should 
see a message saying Successfully Uploaded (APP_ID), where APP_ID is an 
auto-generated identifier for you app. 


Now you are ready to view the app on your mobile device. To do this, simply open 
your Ionic view app on your phone and login with the same Ionic IO account you 
uploaded your app to. You should see your application in a similar fashion to the 
following screenshot: 
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From here, you simply tap the todo app and a prompt will come up with a number 
of options. You should select the download files option. After this has finished, you 
can simply click the View App option. If you followed the instructions correctly, the 
todo app should replace your current view and you should see it running within the 
Ionic view app. 


| Q You can simply tap the screen with three fingers to go | 


back to the Ionic view menu at any time. 


The Ionic view is a good way to view your application, and is extremely useful 
when you want to share progress with your friends, clients, or your boss about an 
app. It has a feature that lets you share to people's e-mails and you can find these 
documented in the Ionic official documentation. You can also manage the apps 
you upload to Ionic view from within the app or online via the Ionic IO website at 
http: //apps.10n1¢.10. 


Device 


You can also test your Ionic application by running it on a physical device. To do 
this, however, you must have the native SDK for each platform installed on your 
computer. Let's take a brief look at how you can run an Ionic app on your device. 


Android 


To run an Ionic app on a physical device, first you simply ensure that you have 
your Android device plugged in via USB. You also need to ensure that you have 
developer mode enabled in your computer with USB debugging on. 


This step assumes that you have already set up the Android 
CISS SDK on your computer and you also have Cordova and Ionic 
set up on your machine. 


Ensure that you are in the root folder of your project in a terminal window and run 
the following command: 


ionic run android 


If you have everything set up correctly, this command will build your app and run it 
on the device plugged into the computer automatically. 
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iOS 
To run an Ionic app on an iOS device, first you need to ensure that you have the ios- 
deploy package installed. 


You can only deploy your app to an iOS device using a Mac computer. 


This step also assumes that you have the iOS SDK set up correctly 
— 
alongside X-Code on your Mac computer. 


If you do not have the i0S-deploy package installed, you can install it via NPM by 
running the following command: 


npm install ios-deploy -g 


Plug in your device to your Mac computer and ensure that it does not have the 
lock screen enabled. Simply run the following command to deploy your Ionic app 
to your device: 


ionic run ios --device 


This command should build and run your application automatically on your 
plugged iOS device. 


Summary 


In this chapter, we learned the various ways to test and deploy our app. We started 
off by using the ionic serve command to deploy our app to the browser using 
Chrome. We then had a look at how we can also serve our application using Ionic 
labs. We then went ahead to use the Ionic view application to see how we can run 
our app on an iOS and Android device with the Ionic view app installed in it. Lastly, 
we touched on how we can actually run our Ionic application on a real Android or 
iOS device. 


In the next chapter, we are going to dive into some more complex Ionic controls, 
and we will get to use Angular's Shttp service to see how we can make Ajax calls 
and retrieve data within our Ionic application. 
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In this chapter, we will be learning how to use some more complex Ionic components 
and controls. We will be creating a more advanced version of our to-do list 
application we created in Chapter 2, To-Do List App, using some more advanced 
built-in Ionic list components. We will call this more advanced to-do list application 
Bucket -List app. The idea behind this application is that it will allow us to enter all 
the interesting things we want to try in a lifetime. Therefore, we can enter the names 
of places we want to visit, the names of activities we want to do, and so on. 


Creating a new to-do list application 


In Chapter 2, To-Do List App, we created a simple to-do list application with the Ionic 
blank template. We were able to get this application to work by allowing us to add 
items into our to-do list application. We will be creating a new to-do list application 
using the Ionic blank template for us to add our new, more advanced components 
to our brand new BucketList application. Let's go ahead and create this new blank 
application by following the following steps. We will be calling our new application 
Bucket -List in order to differentiate it from the one we created in Chapter 2, To-Do 
List App. 


1. To create the Bucket -List app, fire up a terminal window on your computer 
and navigate to the Desktop folder of your computer by running the 
following command: 


cd Desktop 


2. After navigating to the Desktop folder of your computer, go ahead and run 
the following command to create the Bucket -List application based on the 
Ionic blank template: 


ionic start Bucket-List blank 
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3. This command will create a new blank Ionic application called Bucket -List. 
When this command has finished running, navigate to the project of your 
application via the command line by running the following command: 


cd Bucket-List 


Now you have successfully completed the process of creating your Bucket -List 
application, and we can start developing the app by adding features to it. 


Overview of the Bucket-List app 

To understand what we are trying to build, have a closer look at the following 
screenshot. We aim to achieve a final app that closely resembles what we have 
in the following screenshot: 


another item 


an item 





Breaking down the app 


A good way to build Ionic apps is by building them in bits. For our Bucket -List 
application, we can start by first developing the user interface and then writing the 
code behind it to enable it to work. Our user interface will contain an input box to 
enter a new item into our bucket list. Secondly, we have to design the UI for the list 
of Bucket -List items. 


Designing the UI 


Designing the UI involves two main implementations: 


e Implementing the input box 


e Implementing the ion-list element 


We will have a look at each. 


[34] 


Chapter 4 


Implementing the input box 


The first thing we are going to implement is an input box. This input box is the 
form where the users of our app will enter an interesting item they wish to add in 
the Bucket -List application. This will be in the form of an HTML textarea input 
box with some Ionic CSS styles applied to it in order to give it a more mobile look 
and feel. There also will be a button next to the input box with the label ADD. This 
button will be what we tap after we have typed some text and want it to appear as a 
part of our list. Perform the following steps: 


1. Open up the Bucket-List application you created earlier in your favorite 
text editor. 


2. Now, open the index.html file that can be found in the www folder of your 
project. You will see a screen that closely resembles what we have in the 
following screenshot: 


<!DOCTYPE html> 
zh tols 
ippad> 
BELA Cnerset 
“Site MDE 
<title=</tit le 


<link href 
clink href 


<script sre ~e/script> 


<script src se /geripts 


=SEPapat sre Sa SEP 
ac f hea 
<body ng-ape 


<ion-pane> 
<ion-header=bar ¢lass 
shl class 
</16n-header—bar> 
<ion=content> 
</ion—content> 
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You can see that this boilerplate code already contains some code for some custom 
Ionic elements just like we saw in our first application in Chapter 2, To-Do List App all 
of which are prefixed with ion. Pay close attention to the <ion-content> element! 
This element is the element that contains the bits and pieces of our application or the 
content area. It is in between this element that we are going to place all the markup 
for our Bucket -List application. 


Let's start by placing the code for the input box of our application. I have provided 
the code for our input box in the following code block. You are to place this code 
within the <ion-content> element in your index.html file: 


<div class="list"> 


<div class="item item-input-inset"> 

<label class="item-input-wrapper"> 

<input type="text"> 

</label> 

<button class="button button=small"s> 
Add 

</button> 


</div> 


</div> 


The preceding code is the HTML code that will display an input box and a button 

as we described earlier. If you pay close attention to the markup, you will see that 
some elements contain some classes. These classes are custom Ionic classes that are 
available as part of the Ionic CSS. The Ionic CSS comes with a lot of nifty classes and 
features, but for now just be aware of these classes and know that they are part of the 
Ionic CSS. 


If you run your app in the browser using the ionic serve method, you should be able 
to see something that looks very similar to what I have in the following screenshot. 
Enter the following command in a terminal window to run your app using the ionic 
serve method. Make sure you run it from the root folder of your project: 


ionic serve 


You should be able to see the input box with the button placed on its right-hand side. 
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Implementing the ion-list application 


The next step of developing our Bucket-List application is to implement the 
ion-list application. We are going to use one of the built-in components called 
ion-list. The ion-list element is a component for creating and rendering lists. 

It has a lot of cool features that let us render complex lists that can have side options. 
Take a look at the following screenshot that shows the mail app from an iOS mobile 
device showing a list of features that we can implement using ion-list: 


ae 


<€ Mailboxes 


Simon Pickford 
Cast 


Guillermo Castillo 
We're really doing this’? 


Jonah Schmidt 
Best. Birthday. Ever, 


Grant Jividen 
Need to chal 


Amir Assadi 


Updated Jus Mow 





As seen above, one of the most obvious features we can implement with ion-list 
is the ability to show options when we swipe on a list item. It also has other features 
like the ability to delete items or rearrange them. 
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Using ion-list for our Bucket-List app 


For our Bucket -List application, we will be aiming to use the <ion-list> 
component to render every item we enter through the input box. In addition, we 
would want to be able to delete each item from the list by simply swiping from 
the left and thus revealing a delete button, which we can click. The following 
screenshot gives a sample graphic breakdown of what we aim to achieve and 
what items are involved: 


Android 


lonic Blank Starter lonic Blank Starter 


her one im another one 


im a bucket list item item 





The ton-list component 


The first thing we will do is implement the code for our <ion-1ist> component. 
The following code is the code for<ion-list>. You are to copy this code and place 
it just below the code for the input box you already implemented: 


<ion-list> 
</ion-list> 


This is the top-level component needed to create our <ion-list>component. The 
<ion-1list>component has some attributes that let us perform some more complex 
implementations. We will not be exploring these attributes but it is worth knowing 
that they do exist. 


The next step is to implement the child item for our<ion-1list> component. 
Each item in an <ion-1list>component is called <ion-items>. 
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ion-item 

As briefly noted in the previous subsection about the <ion-1ist>component, each 
item in an <ion-list> is called an <ion-item>. Within an <ion-item>, we will put 
the code for what we want each list item to render. It is also the <ion-item> where 
we will use Angular's ng-repeat feature. For our application, we simply want to 
render the name of each Bucket -List item. This means that we can think of every 
Bucket -List item as an <ion-items>. 


For now, we are just going to have some dummy text in our implementation 
showing how a Bucket -List item will prospectively look. The following block 
of code is the implementation of our <ion-item> representing a Bucket -List 
item in our app: 


<ion-item> 
<h2>Bucket List Item</h2> 
</ion-item> 


This is a sample representation of our <ion-items>. If you still have your app 
running in the browser via the ionic serve technique, you should be able to 
see the <ion-item> rendered just like in the following screenshot: 


lonic Blank Starter 


Bucket List Item 





Now, with that implementation completed, there is one more thing we need to do in 
order to finish the implementation of the user interface of our Bucket -List app. The 
one thing remaining is the delete feature. Remember from our initial implementation 
plan that we want the user to be able to swipe each item in our list and have a Delete 
button revealed. Luckily for us, the <ion-item> component has a neat feature for 
this called the <ion-options>. 
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ion-option-button 

The <ion-option-button> component lives within an <ion-item> component as 
its child. Its sole purpose is to allow us to define buttons that we can reveal when 
the user of our app swipes from the right of each <ion-item>component just like in 
the original sample screenshot of our implementations. To get this implementation 
underway, copy the following code and paste it just before the closing tag of your 
<ion-item> component markup: 


<lon-option-button class="button-assertive"> 
Delete 
</ion-option-button> 


If you have a look at the preceding code, you can see that<ion-option-button> has 
a class attribute of button-assertive. This is also another Ionic class that is used 

to define a red button by default on Ionic buttons. Ionic has some built-in classes to 
easily add colors to elements. We will be discussing this later on in this book but for 
now just be aware of this feature. 


By now, your final code for your<ion-item>component should look something 
similar to what I have in the following code block: 


<ion-item> 
<h2>Bucket List Item</h2> 


<lon-option-button class="button-assertive"s> 
Delete 
</ion-option-button> 


</ion-item> 


Your final code for your <ion-content> component should closely resemble what 
we have in the following code block: 


<lon-content> 

<div class="list"> 

<div class="item item-input-inset"> 
<label class="item-input-wrapper"> 
<input type="text"> 


</label> 

<button class="button button-small"> 
Add 

</button> 

</div> 
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</div> 


<ion-list> 


<ion-item> 
<h2>Bucket List Item</h2> 


<lon-option-button class="button-assertive"> 
Delete 
</ion-option-button> 


</ion-item> 


</ion-list> 


</ion-content> 


With this, we have completed the implementation of the user interface of our 

Bucket -List application using the <ion-list> component. Provided you still have 
your app running in the browser via the ionic serve technique, go and try to swipe 
the sample list item in your app from the left-hand side. You should be able to see a 
Delete button when you do this. See the following screenshot for guidance: 


lonic Blank Starter 


DARC 





With this step completed, we are finished with the user interface of our application 
completely. Now, it is time we start to wire up the app by focusing on the Angular 
code that we will be writing to ensure our application works the way we want it to. 
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Writing the Angular code for our Bucket-List 
app 


Before we begin, let's recap what behavior we want to implement in order for our 
application to work the way we want it to. 


Coding our input box 


The first thing we want is to be able to enter some text into our input box later. After 
we enter the text, we want to click the Add button and have this text entered into an 
array that holds all out Bucket-List items. To begin this first, we create our Angular 
controller that will hold all the logic for our app. 


Creating the controller 


Open to the app. js file of your application in your favorite IDE. This file can be 
found in the js folder, which is found in the www folder of your app. 


www/js/app.js 


There should already be a folder called starter with code similar to that which 
I have in the following code block: 


angular.module('starter', ['ionic'] ) 


. run (function ($ionicPlatform) { 
SionicPlatform.ready(function() { 
// Hide the accessory bar by default (remove this to show the 
accessory bar above the keyboard 


// for form inputs) 
if (window. cordova&&window.cordova.plugins.Keyboard) { 
cordova.plugins.Keyboard.hideKeyboardAccessoryBar (true) ; 
} 
if (window.StatusBar) { 
StatusBar.styleDefault () ; 


} 
\); 
}) 
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To begin, we will first start by creating a controller called BucketListController 
just after where we declared our module. If you have done this correctly, you should 
have code that closely resembles the following: 


angular.module('starter', ['1ionic']) 


.controller('BucketListController', function (Sscope) { 


}) 


. run (function ($ionicPlatform) { 
SionicPlatform.ready(function() { 
// Hide the accessory bar by default (remove this to show 
the accessory bar above the keyboard 


// for form inputs) 
if (window. cordova&&window.cordova.plugins.Keyboard) { 
cordova.plugins.Keyboard.hideKeyboardAccessoryBar (true) ; 

} 

if (window.StatusBar) { 
StatusBar.styleDefault () ; 

} 

DE 
}) 


With this done, we have now completed the process of creating our controller called 
BucketLisController. This controller is where all the logic for our app will live. 


Creating the input box model 


We are going to need to create a model that will be bound to our input box. This model 
will be in the form of an object, and it will hold the data that will be represented by the 
text we enter in our input box. We will call this model bucketListItem. To create this 
model, simply enter the following code within BucketListController that you just 
created in the previous step: 


$scope.bucketListItem = { 
title : '' 


ie 


The preceding code is initializing the model for our bucketList Item model. 
This model has a property called title that will hold the text of what we type 
in the input box at every point in time. 
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Creating an array for the Bucket-List items 


The aim of our app is to have a list of the Bucket -List items. These items, as we 
enter them in our input box, will need to be stored in an array. We are going to create 
this array, and we will simply call it bucketListItems. This array is what we will 
use in Angular's ng-repeat attribute to iterate and render in our view. To create this 
array for our Bucket -List items, simply attach an array called bucketListItems to 
the $scope variable of your controller. The following code illustrates this step: 


Sscope.bucketListItems = []; 


Implementing code for the Add button 


The final step to ensure that we are able to add items to our Bucket-List app with the 
input is by writing the code in the form of a function for the Add button. This button 
is responsible for two things. Firstly, it will ensure that the current text in our input 
box is added as an entry to the output box array of the Bucket -List items. Secondly, 
it will also clear up the model to ensure that after we click the button, the input box 
is cleared up for the next item. 


The following code represents the implementation for our Add button: 


S$scope.addBucketListItem = function () { 


//Add Current Bucket List Item To The Front Of Our Bucket List 
Items Array 


Sscope.bucketListItems.unshift (Sscope.bucketListItem) ; 
//Clear Current Bucket List For Next Entry 
S$scope.bucketListItem = { 
Gite Les 4I 
bi 
ht 


From the preceding code you can see that we have created a function called 
addBucketListItem, and attached it to the $scope variable of our controller so it 

is available to our view. Within our function, we first add the current value of the 
bucket ListItem variable to our bucketListItems array. Secondly, we clear up the 
bucketListItem variable to ensure it is cleared for the next entry. 


Now, you can go ahead and implement the preceding code within your controller. 


[44] 


Chapter 4 


Implementing the Delete button 


The last piece of our code is to implement the Delete button of our <ion-option- 
button>. Remember that we want this button to be able to delete the item which it 
belongs to. The following code shows the implementation of the Delete button: 


S$scope.deleteBucketListItem = function (index) { 
Sscope.bucketListItems.splice (index, 1); 


be 


The preceding code simply shows how we have created a function called 
deleteBucketListItem. This function takes in the index of the current item to be 
deleted as a parameter. It then uses this index to remove the corresponding element 
that is placed in that index from the bucketListItems array, which holds all our 
Bucket -List items. 


With that complete, we have pretty much finished the code aspect of our application. 
Your final controller should look similar to what I have in the following code block: 


controller ('BucketListController', function ($scope) { 
S$scope.bucketListItem = { 
cl cl = sae EI 


ie 
Sscope.bucketListItems = []; 


S$scope.addBucketListItem = function () { 


//Add Current Bucket List Item To The Front Of Our Bucket 
List Items Array 


Sscope.bucketListItems.unshift (Sscope.bucketListItem) ; 
//Clear Current Bucket List For Next Entry 
S$scope.bucketListItem = { 
titler ri 
hie 
be 


S$scope.deleteBucketListItem = function (index) { 
Sscope.bucketListItems.splice (index, 1); 


pe 
}) 


Now, before we go ahead and test your application, we have one last step to 
complete. We need to wire up all the code we have just created with the UI we 
implemented earlier so that they can work together. 
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Wire it all up 


With our controller ready, now we have to go ahead and wire all the code to the UI 
so that they can work together in harmony. 


Binding the controller 


The first thing we need to do is to wire up the controller we created. The simple 
and easiest way to do this is by simply using Angular's ng-controller attribute 
directive to specify our controller. In our case, we will be wiring the controller 
on <ion-content> of our app. Once again, open up the index.html file of your 
application. Find the opening <ion-content> tag of the page and specify an 
ng-controller attribute with the name of your controller. 


Your code should closely resemble the following code: 


<lon-content ng-controller="BucketListController"> 


This code is simply telling Angular that we wish to use BucketListController 
within the scope of this <ion-content> element. This means that all the methods 
and properties scoped within this controller are now available to the <ion-content> 
element and all its descendant elements. 


Binding the input box model 


The next step is to ensure that the bucket List Item variable we created in our 
controller is data bound to our input box in the view. Angular also has a simple but 
great attribute directive for this called ng-model. We simply provide ng-model with 
a value that matches an object or variable that we want to data bind to. In our case, 
we want to data bind to the title property of our bucketListItem variable from our 
controller. Again, I have provided the following code for your convenience: 


<input type="text" ng-model="bucketListItem.title"> 


The preceding piece of code we just added tells Angular to bind this variable to this 
input box. Therefore, anytime the value of the input changes from the view, we have 
the same value in our controller and vice versa. 


Wiring up the Add button 


The Add button is next in line for our implementation. For this button, we simply 
need to tell it to run our addBucketListItem function every time it is clicked. Once 
again, Angular has a helper directive for this called the ng-click directive. The 
ng-click directive is like the classic Java onClick event listener and you provide 
it with a function that you want to run every time the wired element is clicked. 

The following code demonstrates how we can wire up our Add button with the 
ng-click directive: 
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<button class="button button-small" ng- 
click="addBucketListItem() "> 


Add 
</button> 


The preceding code implementation simply ensures that when the Add button is 
clicked, the addBucketListener function will run with its expected behavior. 


Binding ion-item 
The last part of our wiring up will be to wire our bucketListItems array to 


our Ion-Item elements, and also bind the ion-option-button element to our 
deleteBucketListItem() function. 


Using ng-repeat to render the list 


Right now we have a sample implementation that has one hardcoded ion-item. 
However, we will want a more dynamic solution where we automatically render 
the items within the bucketListItems array each as an ion-item. For this 
implementation, we are going to use one of the most important Angular features in 
the form of ng-repeat. The ng-repeat angular directive lets us dynamically repeat 
an array. 


Right now, you have a code that looks similar to the following: 
<ion-item> 
<h2>Bucket List Item</h2> 


<lon-option-button class="button-assertive"> 
Delete 
</ion-option-button> 


</ion-item> 


We are going to change this implementation to use the ng-repeat directive of 
Angular. The following code shows you how this is achieved: 


<lon-item ng-repeat="item in bucketListItems"> 

<h2>{{item.title}}</h2> 

<lon-option-button class="button-assertive"s> 
Delete 


</ion-option-button> 


</ion-item> 
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The preceding code now uses Angular's ng- repeat attribute. This code tells Angular 
to repeat the bucketListItems array and also binds the title of each item to an 
HTML <h2> element. 


Wiring up the ion-option-button element 


The ion-option-button element is still untouched and will do nothing if we don't 
tell it to do so. All we need to do for this element is to provide it with a function we 
want to be executed when it is clicked, like we did with the Add button. For this, 
we will be using the ng-click directive again, but this time, we will point it to the 
deleteBucketListItem() function from our controller. The following code shows 
just how we can achieve that: 


<lon-option-button class="button-assertive" ng- 
click="deleteBucketListItem(Sindex) "> 


Delete 
</ion-option-button> 


From the preceding code, you will notice one alien thing, $index being specifically 
passed as a parameter for our deleteBucketListItem function. This variable is a 
magic variable that the ng-repeat directive of Angular exposes to us. It represents 
the index of the current element being rendered by ng-repeat. With this index, we 
can learn what particular element should be deleted from our array of bucket list 
items, and delete the correct one. 


The final <ion-content> in your index.html file should closely resemble what 
I have in the following code block: 


<lon-content ng-controller="BucketListController"> 


<div class="list"> 

<div class="item item-input-inset"> 

<label class="item-input-wrapper"> 

<input type="text" ng-model="bucketListItem.title"> 
</label> 


<button class="button button-small" ng- 
click="addBucketListItem() "> 


Add 
</button> 
</div> 


</div> 
<ion-list> 


<lon-item ng-repeat="item in bucketListItems"> 
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<h2>{{item.title}}</h2> 


<lon-option-button class="button-assertive" ng- 
click="deleteBucketListItem(Sindex) "s 

Delete 
</ion-option-button> 


</ion-item> 
</ion-list> 


</ion-content> 


Testing our Bucket-List app 


We have completed the implementation of our application, and now it is time 

for us to see it in action. Ensure you have your app running in the browser via 
the ionic serve technique, and test it. Try entering some things into your 
Bucket -List app such as skydiving, jet-skiing, and so on. You should see that 
every time you enter an item and click Add, the item will appear in the list and 
the input box will clear up ready for your next input. Also, make sure you test the 
delete option by swiping an item from the left to reveal the Delete button, and 
clicking it to see the item disappear. 


Summary 


In this chapter, we focused on creating our Bucket -List application from scratch 
using the Ionic blank template. We also learned to use the <ion-1list> component 
of Ionic and its child elements. We wrote some Angular code to wire everything up 
and got it running. The <ion-1list>component is a very powerful component, and 
although the task of this chapter might appear a bit more complex that the previous 
ones, there are still some more powerful features that the <ion-list> component 
lets us do. For more information about <ion-list>, visit the official documentation 
of <ion-list> from the provided links in the appendix of this book to learn even 
more complex features. 


In the next chapter, we will be learning some very exciting stuff about creating side 
menu applications with Ionic. We will also build ourselves a tourist application and 
work with the AJAX calls for the very first time using Angular's SHTTP service. 
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The London Tourist App 


In the previous chapter, we created an application called the Bucket-List application 
that enabled us to create a list of interesting things we wanted to do in our lifetime. 
In this chapter, we will create a new application called "The London Tourist" 
application. It is an application that will display a list of top tourist attractions in the 
city of London in England. We will build this application with a new type of Ionic 
template called the side menu template. We will also be using the Angular shttp 
service to query our data via Ajax. 


Introduction to the London Tourist App 


London is the largest city in England and it is a city that is well known to attract 
tourists around the world. The city is very urban but it has many historical and 
non-historical tourist attractions. With this large number of attractions, it can be 
difficult to pick out the best places to go. This is the entire idea behind the London 
Tourist App as it will provide users with five handpicked destinations that tourists 
visiting London can actually visit. These destinations will be stored in a JSON file in 
our project that we will be querying via AJAX and populating. 


Creating the London Tourist app 


To begin the process of creating our app, we are going to start by creating a brand 
new Ionic application. So far in this book, we have learned to create a new Ionic 
application using the blank template. For the application we are about to build, we 
are going to use a new type of Ionic template to create the application. We are going 
to be using the side menu template to create our London Tourist app. 
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The side menu app design 

You might not be familiar with what the side menu template looks like. In fact, 
the side menu design for mobile applications is very common in mobile app 
development. It involves having the ability to slide from the left or right edges 
of a mobile application to reveal more options, normally more menu options: 


«wit, ROGERS @ =: 9:45PM 


©) Harvey Specter 





The side menu design technique is one that is used in a lot of contexts, both on mobile 
and on the web. Normally, you will see an icon positioned either on the far upper-right 
or upper-left, indicating that you can swipe or click that icon to reveal the extra menu 
options. This icon is normally referred to as the hamburger menu icon. 


The Ionic framework actually comes built-in with a side menu template that 
automatically creates a side menu application for us with some useful boilerplate 
code. We will be using this template to create our London Tourist Application. 


Using the lonic side menu template 


To begin developing our London Tourist Application, we will begin by using the 
Ionic CLI to create the app. You can do this by running the following command 
from a terminal window: 


We will shorten the name of our app from London Tourist App 
A~ to LTA to make it easier to type. 


ionic start LTA sidemenu 
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This command will create a new Ionic application called LTA using the default Ionic 
side menu template. 


Seeing the LTA side menu app in action 


As soon as your LTA app is created, you can simply change your directory into 
the app from the terminal and run it on your computer using the ionic serve 
technique. You can do this by running the following commands: 


e Change directory to app: 
cd LTA 


e Run using the ionic serve technique: 


ionic serve 


i 
~ Remember to use Chrome and emulate to a device of your choice 
with the Chrome emulation tools as taught in previous chapters. 


You should see a screen that looks something like the following screenshot: 


Android 


= = Playlists 
Login Reggae Reggae 


Search Chill Chill 


Browse Dubstep Dubstep 


Playlists Indie Indie 


Rap Rap 


Cowbell Cowbell 





As you can see from the preceding screenshot, the side menu app we have just 
created contains some pre-rendered content. 
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Exploring the LTA side menu app's code 


Now, we are going to have a look at the code of the LTA app based on the side 
menu template: 


<ion-side-menu> <ion-side-menu-content> 





Now, I will require you to fire up the LTA project you have just created in your 
favorite IDE. The first thing you will notice is the folder structure that you are 
already used to from previous chapters. 


The index.html file 


Now, focus on the www folder and open the index.html file. A look through this file 
should show you something similar to what we have in the following screenshot: 


<=!DOCTYPE html> 
< > 
ol I 
charset= > 
name= content= 
>= > 





www/index.html. 


| Q To get to this file from the root folder, navigate to | 
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A look at this file will show you some things we have seen from previous projects in 
this book. For example, you can see some CSS and JS references to the Ionic styles 
and script files respectively. You will also see from the body tag that a generated 
Angular module called starter is being instantiated using the ng- app attribute. 


Pay close attention to the <ion-nav-view> tags within the <body> tags. This is an 
Ionic element that is used to specify the view to which the entire app is injected into. 
It is similar to the ng-view feature of Angular but has more powerful features. It also 
automatically handles navigation for us within our Ionic app. You need not pay a 
ereat deal of attention to this part of the code anymore but just have it at the back of 
your mind that <ion-nav-view> is where all content gets injected in, and acts like a 
wrapper for our app's content. 


The menu.html file 


The next file we are going to explore is the menu. html file. This file is probably the 
most important file at this moment as it contains most of the generated code for the 
side menu parts of our app. To have a look at this file, navigate to the menu. html file 
which can be found by navigating into the folder called templates under the www 
folder. Here is the path: www/templates/menu.html. 


If you have successfully done this, you should see a file that closely resembles what 
we have in the following screenshot: 


vy ELTA 


EJ hooks ; z 
<ion-side-menus enable-menu-with-back-views= 


Z <ion-side-menu-content> 

x ; <ion-nav-bar class= > 

O sess | <ion-nav-back-button> 

E www j </ion-nav-back-button> 

> Cicss 

> n <ion-nav-buttons side= 

> Djs <button class= menu-togg Le= 
> Clib </button> 

= </ion-nav—-buttons> 


[J templates k 
P </ion-nav-bar> 


se.htmi ; - : : 
M browse.htm <ion-nav-view name= ></ion-nav-view> 


E) login. htm! ; </ion-side-—menu-content> 
l | menu. htm i 
[D playlist.htmi 15 <ion-side-menu side= 
[È playlists.htmi 1€ <ion-header-bar class= 
E) search.html l <hl class= >Left</hi> 
D index.htm! ' </ion-header-bar> 
) <1on-content> 
<ion-List> 
<ion-item menu-close ng-click= 
23 Login 
E config.xml 23 </ion-iten> 
[@ guipfile.js 24 <ion-item menu-close href= 
[À ionic. project Search 
& package.json £0 </ion-item> 
Eh External Libraries ; <ion-item menu-close href= 
Browse 
</ion-item> 
<ion-item menu-close href= 
Playlists 
</ion-item 
</ion-List> 
</ion-content> 
</ion-side-—menu> 
</ion-side—menus> 


E9 .bowerrc 
È .gitignore 
fd bower.json 
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The <ion-side-menus>element 


The first thing you should pay attention to is the <ion-side-menus> element. Think of 
this element as a container for any side menu application. It allows us to specify what 
the main content area will be via the <ion-side-menu-content> element and also 
allows us to specify the side menus via the <ion-side-menu> elements. There can be 
more than one side menu specified within the <ion-side-menus> elements and we 
have the ability to specify whether the menu is placed on the left, right, or even both. 
There are a lot of cool and powerful controls that the <ion-side-menus> elements 

let us utilize to control its containing items. For now, we will focus on trying to learn 
more about the child elements that are needed to work with the <ion-side-menus> 
elements. These are the <ion-side-menu-content >and<ion-side-menu> elements. 


The <ion-side-menu-content>element 


This element is what houses the main content area or the visible part of the app: 


= Playlists 


Reggae 


Chill 


Dubstep 


Indie 


Rap 


Cowbell 





In the preceding screenshot, which is a view of our LTA app, the part you see is a 
representative of<ion-side-menu-content>. Let's have a closer look at the code 
of < ion-side-menu-content> to see how it actually works in detail: 


menu-—togg Le= 





Within <ion-side-menu-content>, you can see two direct child elements. 
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Firstly, you can see the <ion-nav-bar> element which is used to build the 
navigation buttons of the main content area with the<ion-nav-buttons> element 
as its child element. For example, within these<ion-nav-buttons> elements, you 
can see a navigation button on line 8-9, which has a menu-toggle attribute of value 
left. This is simply saying that when this button is tapped, the left-sided side menu 
should be triggered. Remember that there can be up to two side menus with one 
being on the left and one being on the right in a side menu app. 


The second direct child element is the<ion-nav-view> element on line 12 from the 
preceding screenshot. We talked about this same element earlier when we had a look 
at the index.html file. This element is a placeholder for where the actual content is 
injected. This particular <ion-nav-view> element has a name attribute with the value 
of menuContent. This attribute is important as it is used like a value to uniquely 
identify<ion-nav-views>. 


With all that said, we have now lightly touched on the <ion-side-menu-content > 
element and its main functions. Always think of this element as the element that 
houses the main content area of your side menu application. 


The <ion-side-menu>element 


The <ion-side-menu> element is an element that we use to specify the side menu of 
our app. Just like the <ion-side-menu-content> element, it lives as a direct child of 
the <ion-side-menus> element. There can be up to two<ion-side-menu> elements 
within the<ion-side-menus> element, with only one being on each side. Let's have a 
closer look at the code of<ion-side-menu> of our LTA application. 


side= > 
class= 
class= >Left</h1> 
> 


menu-close ng-click="login()"> 


Login 

> 

menu-close href= 
Search 

> 

menu-close href= 
Browse 

> 

menu-close href= 
Playlists 
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The preceding screenshot is from our menu. html file, and it showcases the code of 
<ionic-side-menu> from our LTA application. If you look at it closely, you will 
notice that opening tag of our <ion-side-menu> element has a side attribute with 
value left. This is basically saying that we want this particular side menu to be on 
the left-hand side. Remember that we can have up to two side menus in our app, 
and one can be positioned on the left and another on the right, but two side menus 
cannot be positioned on the same side. We can also see that this <ion-side-menu> 
has two direct child elements. These child elements are <ion-header-bar> and 
<ion-content>. <ion-header-bar> is an element used to construct the header of 
a side menu. If you have a look at the following screenshot of our side menu, you 
should see a representation of it: 





From the preceding screenshot, you can see the header with the title LEFT as reflected 
in the code as an<h1> element. 


The second child element we can see from the code is the <ion-content >element. 
Think of this element as what houses the content area below the header of the 

side menu. Basically, this is anything below the header. <ion-content> could 
contain any HTML code we want but in this case, it contains<ion-1ist> which is 
something that we used to build our Bucket-List application from Chapter 4, Ionic 
Components. You can also see a reflection of this code on the screenshot from when 
we ran our application. 


With that said, you can see that we have successfully had a brief look at what 
the<ion-side-menu> element entails and how the side menu template of Ionic 
functions. The next step is for us to actually go ahead and build our LTA application 
in full scale now. 
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Developing the LTA application 


We are now equipped with the know-how on how to code our LTA side menu based 
application. Remember that the idea behind our application is to have some of our 
favorite tourist destinations listed in our app. In a normal scenario, we would query 
this data from a real API. But for the sake of simplicity, we will mimic this API 
request by making a request to a local JSON file that would act like a real database 
with the information we need. 


The local JSON database 


As discussed earlier, we are going to create a JSON file that will act like a 
real-life API containing our destinations. This local file will contain five top 
tourist destinations in London. The first thing we will need to do is to create 
this file. 


Creating the local JSON database file 


If you do not have your LTA application open, make sure you open it in your 
favorite IDE. Now, go ahead and create a new JSON file called sites.json within 
the www folder of your project. Make sure you name the file as the . json extension in 
order for it to be parsed as a JSON file. Your directory structure should look similar 
to what is shown in the following screenshot: 


js 
lib 
templates 
D index.html 
Eù sites.json 
fs .bowerrc 
Ą® .gitignore 
SON bower.json 
S config.xml 
[= guipfile.js 
B ionic.project 
SON package.json 





With that done, you have successfully created your local JSON file representing your 
database for your tourist sites. 
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Populating the JSON file 


Now we are going to populate the JSON file with some data. This data will be the 
data of five top tourist attractions in the city of London. The following is a JOON 
array that represents the content of our local JSON database. You should copy 

all the content of the following piece of code into your sites. json file: 


[ 
{ 
Wa a 
"name" :"London Eye", 
"description": "Shows you a great view of the city" 
Ja 
{ 
Ia eo 
"name": ThS Shard, 
"description" :"Highest building in London" 
J 
{ 
aai e eE a 
"name": "Oxford Circus", 
"description": "The place to shop in London" 
ie 
{ 
tige tam, 
"name": "Buckingham Palace", 
"description": "The Queen lives here" 
} 
] 


The preceding piece of code is a JSON array that represents four top destinations 
in London as JSON objects. Each object representing a site has three properties. 
These properties are: 

e ID: A unique identifier for the site. 

e Name: The name of the Tourist site. 

e Description: Some small information about the site. 


By now, we have successfully completed the creation of our JSON local database. 
The next step is to see how we can actually render these items and query the database. 
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We have created our app and we have the data for the application. Before we 
query data, we first need to design how the data will look when rendered. For this 
very task, we will call on an old friend of ours in the face of<ion-list>. We will 
use<ion-list> to render a list of tourist attractions from our JSON database. 


Currently if we run our application, the first page we see is the playlist application, 
as shown in the following screenshot: 


= Playlists 


Reggae 


Chill 


Dubstep 


Indie 


Rap 


Cowbell 





This is because by default the page is specified in the app. js file by Angular as the 
root page of our app. We will keep things simple and change the contents of this 
playlist page and design the view of our LTA application on it. From your LTA 
project folder, navigate into the www folder and look into the templates folder. 
Within the templates folder, there is a playlists.html file. This is the file that 
contains the code for our playlist page shown in the preceding screenshot. Open 


this file and you should see some code that closely resembles what we have in the 
following screenshot: 


view-title= 
> 
> 
ng-repeat="playList playlists" href= 


playlist.title}} 





i 
< The playlists .html file from the root folder of your LTA 
project will have a path www/templates/playlists.html. 
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The first thing we will want to do here is to change the name of the title of our view. 
Currently, the view as seen from the screenshots previously, has a title Playlists. 
This is specified by the view-title attribute of the opening<ion-view> element. 
This view-title attribute currently has a value Playlists. Change this to London 
Sites. This is to ensure that the title reflects the mission of our app, which is to show 
the top London tourist sites. 


The second thing we need to do is to edit the code for<ion-list>. Replace the 
<ion-list> code with the one provided in the following code block: 


<ion-list> 

<lon-item ng-repeat="Site in sites"> 
{{site.name} } 

</ion-item> 

</ion-list> 


If you have done this correctly, your code should now closely resemble what we 
have in the following screenshot: 


view-title= > 
> 
> 
ng-repeat="site sites''> 
{{site.name}} 
/ 





With this done, we have now completed the process of designing our UI. The next 
step is to go ahead and wire up our data to our view. 


Wiring up the data 

Earlier, we created a sites.json file that represented our database. We will be 
making a real Ajax call to this file in order to retrieve its data and serve it within 
our app. The thing we need to do to achieve this is firstly to write the code to 
retrieve the data. 


Retrieving the data with the $http service 


To retrieve the data, we will need to make an Ajax call to the sites. json file. 

For this, Angular has a great service called the shttp service. This is a service that 
provides us with functionality to make Ajax calls to local and remote resources via 
Ajax. To begin using the $http service to write our code, we first need to go to the 
controller associated with our view. By default, when you create an Ionic app based 
on the side menu template, there is a controller attached to the views. To find out 
which controller is attached to our playlist.html file, we need to look at the app. 
js file of our app to discover this. 
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You can find the app .js file by navigating to the www folder of your project and 
looking into the js folder within it. You should see the app. js file. Open it. After 
you open this app. js file, look thorough the part where you have code that looks 
closely to what we have in the following screenshot: 





The code from the preceding screenshot represents the state definition of the 
playlist .html file. Pay close attention to the part of the code from the preceding 
screenshot where the controller is defined and you will see that the controller 
specified there is called Playlistsctr1. This is the name of the Angular controller 
that our playlist .html file is wired with. 


The next step is to go to this PlaylistscCtr1 controller and write the code to retrieve 
our data. By default, the controllers are contained in the controller. js file that can 
be found in the same js folder as our app. js file. 


js 
CETHE 
1 controllers.js 
lib 
templates 
[E] index.html 
= Way n 
E sites.json 
rs 
SONI .bowerrc 
® .gitignore 
| om z 
E bower.json 


S config.xml 
[&& gulpfile.js 
B ionic.project 
oN package.json 
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Open the controller.js file and look for a stub of code that closely resembles what 
I have in the following screenshot: 


.controLler( 


$scope.playlists = [ 
EICI id: 


{ title: 





The preceding code block represents the controller definition of Playlistsctr1. The 
first thing we need to do is to clear all the code within the controller. Basically, we need 
to delete all the code found within the controller. If you have done this correctly, your 
controller should now look similar to what we have in the following screenshot: 





With that done, we can now begin to create the code to query our local JSON 
database with the angular $http service. The first thing we need to do to achieve this 
is to first add the dependency of our $http service to our controller. This step is very 
important as if we do not add this dependency correctly, our app will not load. To do 
this, simply add $http as the second parameter in the anonymous function part of 
your controller definition. If you have done this correctly, you should see something 
similar to what I have in the following screenshot: 


44 .Controller( ($scope, $http) { 


45 
46 }) 





With that done, we can now go ahead and start writing the code to grab our data 
from our local database. To start this process, simply write the following code into 
your controller: 


Sscope.sites = []; 

$http.get ('/sites.json') 

.then (function (response) { 
Sscope.sites = response.data; 


b); 
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If you have done this correctly, your code should look very close to what we have in 
the following screenshot: 


.controLler( ($scope, $http) { 
$scope.sites = [] 
$http. get ( ) 


. then( (response) { 
$scope.sites = response.data 
) 





At this point, I will explain what this block of code is doing. We start by simply 
initializing the variable sites as an array to the $scope. It is a good practice to 
always initialize your Angular $scope variables before using them. The next thing 
we try to do is make an Ajax get request using the shorthand shttp.get () method. 
This $http.get method returns a promise so we handle this promise by using the 
.then() method of promise handling of Angular. In the promise handler function, 
you can see that we start by setting the data property of the response from the 
promise (response. data). This data property of the promise response (response. 
data) is the property that holds any data returned which in our case is the data from 
our sites. json file. 


One thing that might be a bit confusing is the fact that, for the 

first parameter of the $http.get () function, which takes the 

URL of the API or the file we want to consume, we have provided 

` the following relative path'/sites.json'. You might be 
wondering why we have not correctly given a path relative to the 
fs ss cont roller.js file. This is because when working with Angular, 

all paths are referenced from the root index.html file. In our case, 

the sites.json and index.html files are in the same directory 

under the www directory, which is why we do not have the path 

'../sites.json', and instead have the path'/sites.json'. 


With all this done, we have completed the process of creating our LTA application. 
All that is left now is to run the application. Go ahead and run this application using 
the ionic serve technique learned from Chapter 1, First Look at Ionic. Make sure you 
run this command from the root directory of your LTA app project. 
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If you have done this correctly, you should see a list of our tourist destinations as 
shown in the following screenshot: 


= London Sites 


London Eye 
The Shard 


Oxford Circus 


Buckingham Palace 





Summary 


In this chapter, we learned how to create an Ionic application based on the side menu 
template. We used this knowledge to create our London Tourist Application. We 
also had a look at the code that makes up an Ionic side menu template and learned 
about the building block elements of a side menu application. We rounded up by 
querying some data via Ajax using the Angular shttp service and rendered our 
tourist destinations. 


In the next chapter, we will extend our existing application and use some more 
complex Ionic components to do some really cool stuff. 
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In this chapter, we will extend the application we created in Chapter 5, The London 
Tourist App. We are going to learn how to add some more complex features like the 
Ionic Popover and the Ionic Modal components to our current application. At the 
end of this chapter, we will have a popover menu and a modal window as part of 
our application. 


The lonic Popover 


The Ionic Popover component allows us to add a popover menu to our application. 
A popover menu is a contextual menu that is used to provide a hidden menu or extra 
menu options. It is normally used when we have limited space and want to present 

a list of options. Instead of cramming our limited available space, we create some 
sort of button so that, when clicked, the popover menu can pop up and show these 
menu items. 
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The following screenshot shows a good description of what a popover does in reality: 


Popover 


My Popover Title 


Helle! 





Implementing the popover 


We are going to implement our popover in our already existing application. 

The first thing you should do is open your application, as you have left the London 
Tourist Application in the previous chapter. What we will be aiming to do is create 
a popover that has three extra options as a list. These three options are About, Help 
and Logout. These three options will not perform any action as we will only be 
placing them for the sake of example. The following screenshots show a sample of 
what we will be aiming to achieve. 


e ForiOS: 


Popover 


Learn lonic 
Click the more info icon in the top right. 


will automatically be set. 2 
Documentation 


Showcase 


Submit an Issue 


Github Repo 
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e For Android: 


Click the more info icon in the top right. 


will automatically be set. 





To begin implementing our popover, open the playlists.html file of your LTA 
application project. Remember that this playlists .html file can be found by 
navigating to the www folder and looking into the templates folder within it. 
Here is the path: www/templates/playlists.html. 


Now, you should have a file that closely resembles the following code: 


<ion-view view-title="London Sites"> 
<ion-content> 
<ion-list>s 
<lon-item ng-repeat="Site in sites"> 
{{site.name} } 
</ion-items> 
</ion-list> 
</ion-content> 


</ion-view> 


Adding the menu button 


The first thing we are going to do is add the menu button that we want to trigger for 
our popover. This menu will display the popover when tapped. The following code 
block represents the code for button icon of our popover: 


<lon-nav-buttons side="right"> 
<button class="button button-clear icon ion-more"></buttons 
</ion-nav-buttons>s 
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You are to replicate the preceding code just after the opening <ion-view> tag of your 
playlists.html page. The preceding code is using the <ion-nav-buttons> element 
to specify that we want to place a navigation button in our header. This element 

also has a side attribute with the value right. This side attribute is there to tell the 
<ion-nav-buttons> element which side of the page title to position itself. Within the 
<ion-nav-buttons> element is a simple button with some ionic styles that ensure 
that the button has an icon (ion-more) as our popover icon. If you have followed all 
the steps and replicated the code block correctly, your code should closely resemble 
the following code block: 


<1on-view view-title="London Sites">s 


<lon-nav-buttons side="right"> 
<button class="button button-clear icon ion-more"></buttons 
</ion-nav-buttons>s 


<ion-content> 
<ion-list> 
<lon-item ng-repeat="Site in sites"> 
{{site.name} } 
</ion-item> 
</ion-list> 
</ion-content> 


</ion-view> 


At the moment, it is probably a good idea to test our application and see how our 
icon button looks. Fire up your application on a Chrome browser using the Ionic 
serve technique as we have done in the past. Your screen should look close to what 
we have in the following screenshot. 


1 
Q If your title is centered to the left when using an Android emulator on 


Chrome, this is perfectly normal. The iOS equivalent will be centered. 
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London Sites eee = London Sites 





Coding the popover 

The next step is to write the actual logic for our popover menu. The first thing we 
need to do is go into our controller.js file. This file can be found by looking in the 
following path from the root of your project: 


www/js/controller.js 


Within the controller.js file, locate the PlaylistsCtr1 controller. It is within this 
controller that we will be implementing our popover, as it is the controller associated 
with our playlists.html. 


Adding the $ionicPopover service 


In order to use the Ionic Popover, Ionic has a special service called $ionicPopover 
that makes this very easy. Add $ionicPopover as a dependency by specifying it as 
a parameter on your PlaylistscCtr1 controller. If you have done this correctly, your 
PlaylistsCtrl controller should now look similar to the following code: 


.controller('PlaylistsCtrl', function(Sscope, Shttp, 
SionicPopover) { 
Sscope.sites = []; 
Shttp.get ('/sites.json') 
.then(function (response) { 
Sscope.sites = response.data; 


bh 
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Finishing the popover code 


The next step is to write the actual code to create the popover using the 
$ionicPopover service, as shown in the following code: 


SionicPopover.fromTemplateUrl ('templates/popover.html', { 
scope: Sscope 
}) .then(function(popover) { 
Sscope.popover = popover; 


pone 


S$scope.openPopover = function(Sevent) { 
Sscope.popover.show(Sevent) ; 


E 


The preceding code block uses the $ionicPopover service to instantiate a new 
popover. We also use the . fromTemplateUr1 function of $ionicPopover to create 
the popover. This function allows us to pass a URL for a file that contains the HTML 
for our popover. The .fromTemplateUr1 function also returns a promise which 
returns the instance of a popover created. We then bind this popover instance to our 
scope so that it is available for use in our view. There is, however, one small part 
that we have not done. We passed in a file path templates/popover.html as the file 
which contains the code for our popover. However, this popover.htm1 file does not 
currently exist so we need to create it. 


Creating the popover.html file 


To create our popover.html1 file, create a new file called popover.htm1 under the 
templates folder. This templates folder can be found under the www folder located in 
the root directory of your project. Here is the path: www/templates/popover.html. 


Now that we have created this file, the next step is to populate this file. Remember 
that what we are trying to achieve is to have a list of menu items in popover.html. 
We want these three options to be About, Help, and Logout to mimic a fake set of 

popover options. 


To start creating the content of our popover, replicate the following code block into 
your popover.htmlL: 


<1lon-popover-view> 
<ilon-content>s 
<div clags="list"s 
<b class="item" href="#"> 
About 
</b> 
<b class="item" href="#"> 
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Help 
</b> 
<b class="item" href="#"> 
Logout 
</b> 
</div> 
</ion-content> 


</ion-popover-view> 


If you have done this, you have completed implementing the template of your 
popover. Now, let's understand what the HTML code we just implemented on our 
popover.html file does. The <ion-popover-view> element is an element that is 
essential for indicating that this particular view is a popover. It also contains an 
<ion-content> element which is a container for all the visible parts of our view, 

or popover in this case. We then put a div tag with a class list which is one of 

the Ionic's built-in classes. Within this div, there are three HTML bold tags that 
represent our three fake options. That is all we need to complete the implementation 
for our template. The final step is to wire our popover to ensure it works as it should. 


Wiring up the popover 

This is the final step to get our popover to work. Remember that we created a 
function on our PlayListsCtr1 controller called openPopover () which takes in 
a $event parameter. This function will initiate the popover when executed. We 
will also have to pass the $event parameter, which is a reserved parameter that 
represents an event sent from the view. 


To put this into action, we will first need to wire this openPopover () function to be 
executed when the popover icon we created earlier is clicked. This popover button 
is in our playlists.html file from earlier steps. Your current playlists.html file 
should look close to what we have in the following code block: 


<1on-view view-title="London Sites">s 


<lon-nav-buttons side="right"> 
<button class="button button-clear icon ion-more"></buttons> 
</ion-nav-buttons>s 


<1lon-content> 
<ion-list>s 
<lon-item ng-repeat="Site in sites"> 
{{site.name} } 
</ion-item> 
</ion-list> 
</ion-content> 
</ion-view> 
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What we need to do is add an Ionic tap event on the popover icon button that we 
created. We can do this with the Ionic provided attribute directive called on-tap. 
This on-tap attribute directive takes in a function which we want to be executed 
when the containing element is tapped. In our case, we want this function to be the 
openPopover function. Right now our popover Icon button code looks as follows: 


<ion-nav-buttons side="right"> 
<button class="button button-clear icon ion-more"></buttons> 
</ion-nav-buttons>s 


Now, the code for the on-tap ionic attribute directive for <button> will look 
as follows: 


on-tap="openPopover (Sevent) " 


You can see Sevent being passed as a parameter. Remember that this is very 
important and must be passed exactly as that. The final code for your playlists. 
html will look like the following code block: 


<1on-view view-title="London Sites">s 


<lon-nav-buttons side="right"> 


<button class="button button-clear icon ion-more" on- 
tap="openPopover (Sevent) "></button> 
</ion-nav-buttons>s 


<ion-content> 
<ion-list>s 
<lon-item ng-repeat="Site in sites"> 
{{site.name} } 
</ion-item> 
</ion-list> 
</ion-content> 


</ion-view> 


With that done, we have completely finished the implementation of our popover. 


Now, we can run it in our browser using the ionic serve technique to see what it 
looks like. 


If you correctly ran your app using the ionic serve technique, you should see 
something that looks like the following screenshot when you click the popover icon 
button. The view will be different depending on whether you are testing with an 
Android or iOS emulator setting: 
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= London = London Sites 
About 
London Eye 
London Eye About 
Help 
The Shard 
The Shard Help 
Logout 


Oxford Circus 
Oxford Circus Logout 


Buckingham Palac 
Buckingham Pali 





The popover is a great contextual menu tool for fitting extra menu options. It also 
has an automatic way of displaying a different version depending on what mobile 
operating system it is being displayed on. Now that we have learned how to use the 
Ionic Popover, let's learn to use the Ionic Modal. 


The lonic Modal 


The Ionic Modal is a component feature that Ionic provides and is used to create 
a modal window in our application. A modal window is a view that pops up on 
an existing page without losing the context of your current action. As soon as it is 
dismissed, the previous view state is restored. It is a great tool for collecting extra 
information or displaying something on the screen without losing track of our 
current state. 


Creating the modal 


Ionic exposes the modal functionality via a service called the $ionicModal service. 
This service provides us a way of creating a modal in our application. Before we 
begin implementing our modal, let's understand what we aim to do with the modal 
feature in our application. 


We will still be using our LTA application and adding a modal. We want this modal 
to mimic a sample About page of our application which will have some small details 
about the app. Remember that we already have a button from the popover we created 
earlier which has a text labeled as About. We will wire this popover item to simply 
open the modal when tapped. 
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Implementing the modal 


To begin implementing the modal, open your controller.js file and locate 

the PlaylistsCtr1 controller. The first thing to do is add a dependency to the 
$ionicModal service on the Playlistsctr1 controller. This is done by adding 
$ionicModal as a parameter for the PlaylistsCtr1 controller function definition. 
Doing this correctly should make your Playlistsctr1 controller look like what we 
have in the following code block: 


.controller('PlaylistsCtrl', function(Sscope, Shttp, 
SionicPopover, S$ionicModal) { 
Sscope.sites = []; 
$http.get ('/sites.json') 
.then (function (response) { 
Sscope.sites = response.data; 


\); 


SionicPopover.fromTemplateUrl ('templates/popover.html', { 
scope: Sscope 

}) .then(function(popover) { 
Sscope.popover = popover; 


P); 


$scope.openPopover = function ($event) { 
Sscope.popover.show(Sevent) ; 
y; 
}) 


The next thing we are going to do is write the code for our modal in our 
PlaylistsCtr1 controller. The following code represents the code for our modal: 


$ionicModal.fromTemplateUrl ('templates/modal.html', { 

scope: Sscope 

}) .then(function(modal) { 
Sscope.modal = modal; 

EF 

$scope.openModal = function() { 
Sscope.modal.show() ; 

bi 

S$scope.closeModal = function() { 
Sscope.modal.hide() ; 


w 
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Replicate the preceding code into your PlaylistscCtr1 controller. If you have done 
this correctly, your code block for the Playlistsctr1 controller should look like 
the following: 


.controller('PlaylistsCtrl', function(Sscope, Shttp, 
SionicPopover, $ionicModal) { 


}) 


SionicModal.fromTemplateUrl ('templates/modal.html', { 
scope: Sscope 

}) .then(function(modal) { 
Sscope.modal = modal; 


b); 


$scope.openModal = function() { 
Sscope.modal.show() ; 


bs 


S$scope.closeModal = function() { 
Sscope.modal.hide() ; 


ie 


Sscope.sites = []; 
Shttp. get. ("/ sites...) son") 
.then (function (response) { 
Sscope.sites = response.data; 


}); 


SionicPopover.fromTemplateUrl ('templates/popover.html', { 
scope: Sscope 

}) .then(function(popover) { 

Sscope.popover = popover; 


p); 


$scope.openPopover = function ($event) { 
Sscope.popover.show(Sevent) ; 


pe 


Now, let's understand what the code for the modal is doing. We used the 
$ionicModal service to create a modal via its .fromTemplateUrl1 () method. This 
method takes two parameters; the first being the path to an HTML file containing 
the modal, and the second being an options object. This options object lets us 
customize the modal and even provides us with ways to customize things like what 
animation to use. For now, we only specify the scope the modal should use, which in 
this case is the scope of our controller. 
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The .fromTemplateUr1 method returns a promise with the created modal, which we 
set to our Sscope. The following code is a reflection of the modal creation: 


SionicModal.fromTemplateUrl ('templates/modal.html1', { 
scope: Sscope 
}) .then(function(modal) { 
Sscope.modal = modal; 


bh)? 


We also have two functions that we created. These functions are .openModal () and 
.closeModal (). The openModal () function is bound to the $scope, and all it does 
is use the created modal's . show() method. The .closeModal () function does the 
opposite by implementing the .hide() method of the created modal. One thing we 
have not done yet is create the HTML template we passed, which is the modal . html 
in this case. 


Creating the modal.html file 


Navigate to your templates folder and create a new HTML file called modal. 
html. The following code represents the template file for our modal, and you are to 
replicate this code into your modal . html file: 


<1lon-modal-view> 
<lon-header-bar class="bar bar-header bar-positive"> 
<h1 class="title"sAbout The App</hl1> 
<button class="button button-clear button-primary" on- 
tap="closeModal () ">Cancel</button> 
</ion-header-bar> 


<lon-content class="padding"> 
The LTA app is part of the Ionic By Example book written 
by Sani Yusuf. 
</ion-content> 
</ion-modal-view> 


If you look at this code closely, you can see an <ion-modal-view> element as the 
root element of the code. This <ion-modal-views element is the root element of 
any modal template. We can also see that we have an <ion-header-bar> element 
and this element has a <h1> element used to declare the title of the modal header. 
There is also a <button> element that has an on-tap attribute that is directed to a 
closeModal () function which we created earlier. 


There is also an <ion-content> element which is used to contain the visible main 
body of the modal. There is some dummy text to mimic the About page of the LTA 
app, but feel free to add some of your own HTML text. The last step we need to do is 
wire our popover button to open our modal. 
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Wiring up the modal 


To wire up our modal, remember that we want our About popover menu item to 
open the modal when tapped. To begin, first open the popover.htm1 file of your 
project. What you have currently is as follows: 


<lon-popover-view> 
<ion-content> 
<div class=" List "> 
<b class="item"s>s 
About 
</b> 
<b class="item"s>s 
Help 
</b> 
<b class="item"s 
Logout 
</b> 
</div> 
</ion-content> 


</ion-popover-view> 


All we need to do is use the Ionic on-tap attribute on the About entry to reference 
the openModal() function. Doing this correctly will make our popover code look like 
the following: 


<lon-popover-view> 
<lon-content> 
<div iclass="list'"s 


<b class="item" on-tap="openModal () "> 
About 

</b> 

<b class="item"> 
Help 

</b> 

<b class="item"> 
Logout 

</b> 


</div> 
</ion-content> 


</ion-popover-view> 
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With this done, we have completed the implementation of our modal window. 

The next thing to do is to go ahead and test this. To do this, run your application 
using the Ionic serve technique. When your app is up and running in the browser, 
tap the popover icon and the About option. This should bring up a modal window 
like the one shown in the following screenshot: 


= London Sites About The App Cancel 


London Eye The LTA app is part of the lonic By Example book written 
About by Sani Yusuf. 


The Shard 
Help 


Oxford Circus 
Logout 


Buckingham Palac 





Summary 


In this chapter, we used two very important features of Ionic and learned to create 
a popover and modal. We still used our LTA application from the previous chapter. 
The Ionic Popover is a great feature which is used to add extra menu items or 
provide contextual menu options. We also learned about the Ionic Modal, which is 
used to provide a view over another view of the app while maintaining the context. 


In the next chapter, we will learn to use some of the customization techniques of 
Ionic, along with how to customize our Ionic app. 


[80] 





Customizing the App 


In the previous chapter, we dug deeply into some more advanced features of Ionic 
like the popover and the modal features. In this chapter, we will be focusing on 
customizing an Ionic application. The Ionic SDK comes by default with some great 
tools that make it easy to customize your application to fit the design guides of your 
brand. This is thanks to its built-in integration of Gulp for your build process needs 
and SCSS for CSS preprocessing. 


Ionic also has a special Angular provider called $ionicConfigProvider. This provider 
can be used to do a lot of configuration and customization like specifying what type of 
animations your application should use or even more advanced stuff like specifying 
how many cache items you want in your cache. The $ionicConfigProvider also lets 
you specify these configurations on a global level, or on a platform-by-platform basis. 


Customizing the look and feel of your 
app 


When you created an Ionic application using one of the Ionic templates, you would 
have noticed by now that it comes with some built-in default CSS styles. Many times 
you will want to know how you can add your own colors and styles while keeping 
some of the built-in Ionic styles. 
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lonic styles with SASS 


This is well thought out by the Ionic team and for this reason, they actually created 
all their CSS styles using SCSS. SCSS is an independent technology based on SASS 
that lets you write CSS in an object-oriented way which then gets compiled into CSS. 
SCSS is a really cool way to write CSS rules as it allows us to create variables and use 
them to create our style sheet. If you are completely new to SCSS and you want to 
see some brief information about SCSS, feel free to visit http: //sass-lang.com. 


Now, let's have a look at the folder structure of an Ionic project once more with 
customization of our styles with SCSS in mind. 


lonic SCSS overview 


To have an overview of the SCSS structure of Ionic, we are going to create a brand 
new application using the Ionic blank template. We are going to call this application 
custom-app. The following is the command to create this new application. Fire up a 
terminal window on your computer and CD into a directory of your choice and run 
the following command: 


ionic start custom-app blank 


After you have created your new custom-app application, open this new project 
in your favorite IDE to have an overview of the folder structure. You should see 
something close to what we have in the following screenshot: 
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scss 


g jonic.app.Scss 


fonts 
js 
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Eù version.json 
[M] index.html 
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There are two folders that you should pay close attention to. The first folder is the 
scss folder found in the root directory of the project. This folder has a file called 
ionic.app.scss within it; we will take a look at this in more detail. The following 
is a screenshot of what this folder looks like: 


Vv scss 


ra. r 
SASSI [ela] A: To] oL 





The second folder is also titled scss, but this folder can be found by navigating to 
the following path from the root folder www/lib/ionic/scss. 
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The following screenshot shows this folder: 
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Now, if you look even further within this second scss folder, you should see 
something that closely resembles what we have in the following screenshot with 
a number of SCSS files within the scss folder: 
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This scss folder contains a numerous amount of files and you might be wondering 
what these files are for. As a part of this book, you do not need to understand the 
entire process of what these files are doing, but you need to know that they are the 
files that contain the SCSS code for every Ionic element. The entire Ionic CSS style 
sheet is generated by compiling these SCSS files. It is possible to go into these files to 
make changes to any SCSS file, but this is probably not a good idea, as you will risk 
breaking any dependencies in the SCSS code. For this reason, Ionic provides a much 
simpler way to do this thanks to ionic.app.scss that we briefly looked at earlier 
and will be looking at closely now. 


The ionic.app.scss file 


The ionic.app.scss file can be found within a directory called scss in the project 
root directory, as shown in the following screenshot: 


y | SCSS 





ry. ° 
g% ionic.app.Scss 


This file is the most important file for customizing the styles of your Ionic app. Think 
of this file as an interface for overriding any SCSS style contained in any of the SCSS 

files we noted in the www/lib/ionic/scss path. If you look at this ionic.app.scss 
file currently, it should look like what we have in the following code: 


/* 


To customize the look and feel of Ionic, you can override the 
variables in ionic's variables.scss file. 


For example, you might change some of the default colors: 


Slight: #£fF£ !default; 
Sstable: #ESESE8 !default; 
Spositive: #387ef5 !default; 
Scalm: #11c1£3 !default; 
Sbalanced: #33cd5£ !default; 
Senergized: #ffc900 !default; 
Sassertive: #ef473a !default; 
Sroyal: #886aea !default; 
Sdark: #444 !default; 

= 


// The path for our ionicon's font files, relative to the built CSS in 
www/css 
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$ionicons-font-path: "../lib/ionic/fonts" !default; 


// Include all of Ionic 
@import "www/lib/ionic/scss/ionic"; 


From the preceding code, you can even see some comments that tell you how to use 
the file to override your SCSS styles. Now, before we start learning how to actually 
override these files, first let's learn how to set up our SCSS for our project. 


Setting up SCSS 


Before we set up the SCSS, we will first have a brief look at how our CSS is currently 
integrated. When you create a new Ionic project, the project uses styles from two 
sources by default. 


The first source is the ionic.css file which can be found in the path lib/ionic/ 
css/ionic.css. This file contains already compiled CSS code for all the Ionic default 
styles. It is simply a CSS compilation of all the SCSS files found in the www/1ib/ 
ionic/scss/ionic directory relative to the root directory of your project. 


The second source is the style.css file found in the css/style.css path relative to 
the root directory of your project. This file is normally empty at the time you create 
your project and is a place where you can enter your own custom styles in CSS, if you 
do not want to use SCSS. A look at the index.html file as shown in the following 
screenshot shows how these two files are referenced as CSS style sheets by default: 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset= > 
<meta name= content= 


<title></title> 


<link href= 
<link href= 


<script src= ></script> 


<script src= ></script> 


<script src= ></script> 
</head> 
<body ng-app= > 


<ion-pane> 

<ion-header-bar class= > 
<hl class= >Ionic Blank Starter</hl1> 

</ion-header-bar> 
<ion-content> 
</ion-content> 

</ion—pane> 

</body> 
</html> 
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With this explained, we will go ahead and start setting up SCSS on our Ionic 
application. 


Setting up SCSS can be quite challenging traditionally but Ionic comes built-in with 
some tools that make it easy. To begin the process of setting up the SCSS of your 
project, fire up a terminal window and simply navigate into your project's root 
directory by running the cd custom-app command. 


The next step is to install bower on your computer if you do not already have this 
installed. You can do so by running the following command: 


npm install bower -g 


You might need to prefix the sudo command if you are on a Linux 
vx j 


or Mac computer. This will be sudo npm install bower -g. 


After this, the final step to get SCSS setup is by running the following command: 


ionic setup sass 


This command will do all the necessary things behind the scenes that are needed to 
enable your project to work with SCSS. After this command is complete, you will 
notice a new folder called the node-modules folder in the root of your project. This 
is completely normal and is the folder that contains the packages necessary for your 
project to work with SCSS. 


By now, we have successfully set up SCSS for our project. The first thing you should 
look at is your index.html file. Your index.html should resemble the following 
code block: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="initial-scale=1, maximum- 
scale=1, user-scalable=no, width=device-width"> 
<title></title> 


<!-- compiled css output --> 
<link href="css/ionic.app.css" rel="stylesheet "s 


<!-- ionic/angularjs js --> 
<script src="Lib/ionic/]s/ionic.-bundle.j]s">»</soripts 
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<!-- cordova script (this will be a 404 during development) 
= 


<script src="cordova.js"></script> 


<!-- your app's js --> 

<5cript SrC="]s/app.) 6" ></script> 
</head> 
<body ng-app="starter"> 


<lon-pane> 

<ion-header-bar class="bar-stable"> 
<h1 class="title"sIonic Blank Starter</hl> 

</ion-header-bar> 
<1lon-content>s 
</ion-content> 

</ion-pane> 

</body> 
</html> 


The first thing you will notice in the header is that the reference to CSS files have 
changed in comparison to what we briefly discussed earlier. Now, you have only 
one CSS reference in the <head> part of index.html pointing to css/ionic.app. 
css. You might be wondering how this happened. Well, basically when you set up 
SCSS like we have done in this chapter so far, lonic automatically sets up the SCSS 
to compile all the SCSS and output them into ionic.app.css. 


ionic.app.css 


ionic.app.min.css 





style.css 


If you navigate to the www/css path, you will see that we have three files as opposed 
to one as we saw earlier. You will see an ionic.app.css file and an ionic.app. 
min. css file. These two files are the same with ionic .app.min. css being a minified 
version of the ionic.app.css. They are the output of all the SCSS files that we 
checked out earlier compiled into one file. There are a lot more things that happen 
behind the scenes to ensure that this SCSS compilation happens, but for the sake of 
simplicity we won't be going deep into that in this book. 
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Customizing the SCSS 


To begin customizing our app, the first thing you want to do is to run your application 
using the ionic serve technique learned from previous chapters in this book, using 
the following command: 


ionic serve 


This should bring up your application running in the browser and you should see 
something that closely resembles what we have in the following screenshot: 


lonic Blank Starter 





CaN Make sure you don't close your terminal or terminate the serve session 
/. from here on, in order to follow the instructions that come soon. 


Now to explain what we will try to do, first let's have a look at the code for the 
head of this app. The code block is the code for our app and you can find this in the 
index.html file in the www folder of your project: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="initial-scale=1, maximum- 
scale=1, user-scalable=no, width=device-width"> 
<title></title> 


<!-- compiled css output --> 
<link href="css/ionic.app.css" réel="stylesheck"= 


<!-- ionic/angularjs js --> 
<script src="]ib/ionic/js/ionic.bundle.js"></script> 


[89] 


Customizing the App 


<!-- cordova script (this will be a 404 during development) 
==> 
eSoript. (src="cordova. js" s</Sscripts 


<!-- your app's js --> 
“sSCript. src="7s5/app. 1S" S=</scripes 
</head> 


<body ng-app="starter"> 


<lon-pane> 

<ion-header-bar class="bar-stable"s 
<h1 class="title"sIonic Blank Starter</hl> 

</ion-header-bar> 
<ion-content> 
</ion-content> 

</ion-pane> 

</body> 
</html> 


Pay close attention to the piece of code that represents the main view part of the 
preceding code block which is also represented in the following code block: 


<lon-pane> 
<ion-header-bar class="bar-stable">s 
<h1 class="title"sIonic Blank Starter</hl1> 
</ion-header-bar> 
<ion-content> 
</ion-content> 
</ion-pane> 


If you look at the opening <ion-header> tag, you will see that it has a class called 
bar-stable. This is an in-built class that lonic comes with which gives the header a 
sort of light gray color, as seen from the screenshot we visited earlier. 


Let's say we want to customize this header to fit our brand color and let's say, for 
example, that our brand color and this brand happens to be my favorite accent of red 
which has the hex code of #D71300. 


Now, you might be tempted to go into the ionic. app. css file to look for every 
occurrence of this in our CSS style sheet and change it. But remember that this 
ionic.app.css is generated based on our SCSS files. Ionic gives us a great way to 
override default styles with SCSS thanks to the ionic.app.scss file which can be 
found in the scss directory. We looked at this file earlier and we are going to look 
at it again: 

/* 


To customize the look and feel of Ionic, you can override the 
variables in ionic's variables.scss file. 
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For example, you might change some of the default colors: 


Siaohite #f£fF !default; 
Sstable: #ESESE8 !default; 
Spositive: #387ef5 !default; 
Scalm: Pileves, default 
Sbalanced: #33cd5£f !default; 
Senergized: #ffc900 !default; 
Sassertive: #ef473a !default; 
sroyal: #886aea !default; 
Sdark: #444 !default; 

A 


// The path for our ionicons font files, relative to the built CSS 
in www/css 


$ionicons-font-path: "../lib/ionic/fonts" !default; 


// Include all of Ionic 
@import "www/lib/ionic/scss/ionic"; 


The preceding code block resembles what you currently have in your ionic .app. 
scss file. To override the color of the header, we will override the current color of 
the $stable variable of our SCSS. 


The code for this is as follows: 
Sstable: #D71300; 


You are supposed to replicate the preceding code anywhere but just before the last 
line of the following code block: 


@import "www/lib/ionic/scss/ionic"; 
Now, your final code should resemble the following: 
/* 


To customize the look and feel of Ionic, you can override the 
variables in ionic's variables.scss file. 


For example, you might change some of the default colors: 


Slight: HEEL !default; 

Sstable: #f8f8f8 !default; 
Spositive: #387ef5 !default; 
Scalm: #1l1ic1£3 !default; 
Sbalanced: #33cd5£ !default; 


Senergized: #ffc900 !default; 
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Sassertive: #ef473a !default; 
Sroyal: #886aea !default; 
Sdark: #444 !default; 

se 


Sstable: #D71300; 


// The path for our ionicons font files, relative to the built CSS 
in www/css 
Sionicons-font-path: "../lib/ionic/fonts" !default; 


// Include all of Ionic 
@import "www/lib/ionic/scss/ionic"; 


Once this is done, save the ionic.app.scss file. By doing this, you have completed 
the process of overriding the app, and your header should now be red. Go back to 
your application on the browser or run your app with the ionic serve technique if 
you don't have it running and you should see something that looks similar to what 
we have in the following screenshot: 





You can see that header now takes the color of the hex code we provided in the 
ionic.app.scss file. We can override any default file with this file. All you need to 
do is have a glance through the 1ib/ionic/scss folder, identify the SCSS rule you 
want to override, and override in ionic.app.scss. 


With this done, we have completed the process of learning how to override and set 
up SCSS of our Ionic app. The next step is to learn about $ionicConfigProvider. 
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$ionicConfigProvider 


SionicConfigProvider is a provider that Ionic exposes and which allows us to do 
some very powerful configurations. We will not be writing any code for this as it is 
an advanced feature but you should be well aware of its existence. 


Some of the features that $ionicConfigProvider lets you do, include the following: 


e Specify the transition type for your app 

e Set the maximum cache 

e Disable/enable animations 

e Enable/enable native scrolling 

e Specify tabs positions 
These and many more are some of the features that SionicConfigProvider lets 
you fiddle with. Remember that this feature is a fairly advanced feature and it is 
very likely possible to completely design your app without it. Most apps most likely 
do not use its features but if you find yourself ever needing to use it, you can visit 


the official documentation for $ionicConfigProvider to see its full potential at 
http://ionicframework.com/docs/api/provider/SionicConfigProvider/. 


Summary 


In this chapter, we learned how to customize our application by setting up SCSS for 
our Ionic app. We also had a brief look at SionicConfigProvider and saw some of 
its wonderful features. In the next chapter, we will get to learn how to create a new 
type of Ionic app based on the tabs template. 
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Building a Simple Social App 


In this chapter, we are going to focus on learning how to create an Ionic application 
that has tabs using the Ionic tabs template. We will also have a look at some of the 
things that make up the tabs template and learn how to add features into it. 


The lonic tabs application 


Tabs are a very common menu system in mobile apps. They provide users with a 
simple yet effective way to create independent views in an app that sort of act like 
apps within an app. 


Chats 


Ben Sparrow 
You on your way? 


Ben Sparrow 
Max Lynx You on your way? 
Hey, it's me 


Max Lynx 
Andrew Jostlen , Hev. it's me 


Did you get the ice cream? 


Andrew Jostlen 
Adam Bradleyson Did you get the ice cream? 


| should buy a boat 


Adam Bradleyson 
Perry Governor | should buy a boat 


Look at my mukluks! 


Perry Governor 


Look at my mukluks! 
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The preceding screenshot is a view of a sample Ionic tabs application. One great 
feature that a tabbed menu system provides is the ability to maintain the independent 
context within each individual tab menu. No matter where you are in the application, 
you always have the option of switching to another tab at any point. Navigation 
history is another feature that the tabs menu provides. You are able to navigate to 
different views within each tab, and you do not lose this navigation history when you 
switch back and forth between any tab menu. Now that we have some clarity about 
what the tabs application entails, let's go ahead and create a brand new tab application 
and look in detail at how it operates. 


Creating an lonic tabs application 


Creating an Ionic tabs application is not too different from creating the side menu 
and blank Ionic applications as we have done in the previous chapters of this book. 
We are going to create a new Ionic tabs application, and we will call this application 
tabs-app. To create this new application, fire up a terminal window and run the 
following command: 


ionic start tabs-app tabs 


Using the preceding command, you will create your tabs-app ionic application 
successfully. The next thing we are going to do is to have an overview of the 
application we just created. To do this, simply open the tabs -app project in your 
favorite IDE. You should have a projects folder structure that looks similar to 
what I have in the following screenshot: 


[96 ] 


Chapter 8 


hooks 

platforms 

plugins 

SCSS 

WWW 
CSS 
img 
[E 
lib 
templates 
[i] chat-detail.html 
[Ñ] tab-account.html 
[Ñ] tab-chats.htmi 
[i] tab-dash.htmi 
[i] tabs.htmi 

[Ñ] index.html 


Ñ .bowerrc 


ERLEOK 
® .gitignore 

EÙ bower.json 
kà config.xml 


[E34 gulpfile.js 





Running the tabs-app application 


Now that we have created our app, let's go ahead and see it in action. To do this, fire 
up a terminal window on your computer and run your application using the ionic 
serve technique. 


RY. Make sure you are within your project's folder by running cd tabs- 
Q app. To run your app using the ionic serve technique, run the ionic 
serve command on your terminal. 
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You should see an application with three tabs that looks similar to what we have in 
the following screenshots. 


e ForiOsS: 


Dashboard 


Recent Updates 


There is a fire in sector 3 


Health 


You ate an apple today! 


Upcoming 


You have 29 meetings on your 
calendar tomorrow. 


ve 


Status Account 





e For Android: 


Dashboard 


h- 





Recent Updates 


There is a fire in sector 3 


Health 


You ate an apple today! 


Upcoming 


You have 29 meetings on your calendar 
tomorrow. 
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Overview of the tabs-app application 


To begin to understand the life cycle of our tabs-app Ionic tabs application, 
we first need to have a look at the entry module of our application. Our entry 
module is normally specified within the index.html file of our app via 

the ng-app directive. 


The index.html file is located in the www directory of your application. 


A look through your index. htm1 will reveal a file that closely resembles what we 
have in the following screenshot: 


<'DOCTYPE html> 
<html> 
<head> 
<meta charset 
“meta name= 
<title></titLe> 


<Link href= 
<Link href: 


<script sre 


ascript src= ></script> 


<script src= ></script> 
<script src= ></script> 
<script src= ></script> 
® /head> 
=no0y ng-d 


<Lon-nav-bar class= 
<10n-—nav—-back—button> 
</Lon-nav-back-button> 

=/1on—nav—bar> 


<Lon-naVv-Vlew></ 10n-nav-View> 
</ body> 
</html> 
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You will see an Angular module called starter specified as on the opening 
<body> tag of our page via the ng-app directive. This can be seen highlighted in the 
preceding screenshot. This starter module is normally located in our app. js file, 
and we are going to have a look at it to understand the module even more deeply. 


| The app. js file is located in the www/j s path of you project. | 


Open your app. js file and pay close attention to the .config() function where your 
routes are configured. Pay close attention to the first route definition of a route called 
tab. This route definition is represented in the following screenshot: 


(¢stateProvider, $urlRouterProvider) { 


ateProvider 





This tab state is an abstract state. An abstract state in Angular is a state that you 
cannot directly navigate to but which can contain child states that can be navigated 
to. This is a great way to create some sort of hierarchy for your states. 


Based on the state definition of the tabs as highlighted in the preceding screenshot, 
you can see that it references templateUr1 to the tabs .htm1 file contained in the 
templates/template.html directory. To understand how Ionic works with tabs, 
let's explore the tabs. html file. 


Overview of the tabs.html file 


When you open your tabs. html file, you will see something that closely resembles 
what I have in the following screenshot: 
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You will clearly see that the entire markup is wrapped within the <ion-tabs> 
element. This <ion-tabs> element is the root element that acts like a container for 
the tabs that you declare in your Ionic tabs application. You can see that the opening 
<ion-tabs> tag also has a class attribute with some built-in Ionic CSS classes 
provided. This is because the <ion-tabs> element is just like every other element 
and is submissive to some CSS styling. 


The <ion-tab> element 


Within the <ion-tabs> element, you will see three distinct <ion-tab> elements. 
The <ion-tab> element is the element used to create a tab and must be a child 
element of the <ion-tabs> element. You will see that each <ion-tab> element has 
some attributes. The title attribute is used to specify the title that that particular 
tab will display. The icon-on and icon-off are attributes that are used to define 
what icons get displayed when the tab is in focus and out of focus. Lastly, the href 
attribute is used to provide the path of the route that should be navigated to when 
that particular tab is selected. 


There are a lot more attributes that are available for different 
customizations and actions for <ion-tabs, and these are all available 
and duly documented on the official Ionic documentation page. 
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Within each <ion-tab> element, you will find an <ion-nav-view> declaration. 

The <ion-nav-view> is an element used to refer to an Angular view. If you pay 
close attention, you will see that the <ion-nav-view> elements have a name attribute, 
which has values. This name attribute is used to specify the name of a particular view 
that is defined in our app. js file. If you have another short look at the app. js file, 

as we did previously in this chapter, you will see that some of the states have views 
defined. A clear demonstration of this is shown in the following screenshot of the 
tab.dash state: 





You can see that there is a tab-dash view named within the views object, and this 
tab-dash view has a templateUr1 definition as well as a controller definition 
similar to a normal state definition. This is how Ionic provides a hierarchy that 
enables each tab to have a separate <ion-nav-view>, where its view is placed. 

To get an even better understanding of how this tab system works, we will be 
adding another tab to our application. 


Adding tabs to the tabs-app application 


We will add one new tab which will contain a feature that will let users post 
messages like a message board and see that it appears similar to a Facebook wall 
or a Twitter wall. We will be calling this new tab the wa11 tab. To add this new tab, 
the first thing we need to do is to add the route for our new tab. 


Adding the state for the new tab 


To add the state for our new tab, we need to define this tab in our app. js file where 
all our default tab routes are defined. Within the . config() function found in your 
app. js file, place the following block of code just after the state definition of the tab 
abstract state: 
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.state('tab.wall', { 
url: “/wall’, 
views: { 
'tab-wall': { 
templateUrl: 'templates/tab-wall.html', 
controller: 'WallController' 


} 
}) 


If you have done this correctly, parts of the .config() function of your app. js file 
should look something like this: 


( ($stateProvider, $urlRouterProvider) { 





Let's try to understand what we have just done here. We have created a new state 
called tab.wal1, which has a route /tab. This means that we are able to navigate to 
this tab.wall state or /tab route as part of our Angular application. We have also 
created a new view called tab-wa11, and later in this chapter, we will use this 
tab-wall view to reference it as where we want the content of our newly created 


tab to be displayed. 
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If you take a closer look at our new state definition, you will see that we referenced 
a templateUr1 to a file with the path templates/tab-wall.html and a controller, 
WallController, both of which we have not yet created. We will need to create this 
tab-wall.html file and also create the WallController controller. 


Creating the tab-wall.html file 


To create the tab-wall.html file correctly, we need to make sure that we create it 
within the templates directory in order for it to match the templates/tab-wall. 
html directory which we passed when declaring our state definition. 


Create a file called tab-wall.htm1 within your templates folder. If you have done 


this correctly, your templates directory should look something very similar to what 
we have in the following screenshot: 


is 
[EX app.js 
Es controllers.js 


Es services.js 
lib 
templates 
K chat-detail.html 
[b] tab-account.htm| 
AREA 
K tab-dash.html 
fi tab-wall. html 
[H] tabs.html 

[M] index.html 





The next step is to actually populate the newly created tab-wa11.htm1 file. Place the 
code as shown in the following code block into your tab-wa11.htm1 file: 


<lon-view view-title="Wall"> 
<lon-content class="padding"> 


<div class="list"> 


<div class="item item-input-inset"> 
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<label class="item-input-wrapper"> 
<input type="text" placeholder="enter your message"> 
</label> 
<button class="button button-small"> 
POSE 
</button> 
</div> 


</div> 


<div class="card"> 
<div class="item item-text-wrap"> 
This Is A Sample Message Post 
</div> 


</div> 


</ion-content> 


</ion-view> 


If you have correctly done this, your tab-wall.htm1 should look something like the 
following screenshot: 


class= 
Gtasss 
class= > 
type= p Laceho lder= 


GLlassSs 


£ lass= 
class= 
This Is A Sample Message Post 





This next step is to create the controller we defined in our state definition. 
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Creating the WallController controller 


To create the WallController controller, first we need to open the controller.js 
file. This file can be found within the same folder as our app.js file, that is, the JS 
folder. Your controller.js file should closely resemble what we have in the 
following screenshot: 


Bngular.module( Ul ER) 


.controller( , Tunction($scope) ił) 


.controller\| , function($scope, Chats) { 


$scope.chats = Chats.all(); 
$scope. remove = function(chat) +4 
Chats. remove(chat) ; 


Chats | 


controller ( , function($scope, $stateParams, 
$scope.chat = Chats.get($stateParams. chatId) ; 
F) 


‚controller , function($scope) 4 


$scope. si 





To create the wallController file, simply place the code found in the following 
code block just after the first line where you can find the line of code, angular. 
module ('starter.controllers', []): 


.controller('WallController', function(Sscope) { 


}) 
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If you have correctly replicated this code, your controller.js file should closely 
resemble to the following screenshot: 


r.module( []) 


.controLller'| , function($scope) 


.controLller( , function($scope) {}) 


.controLler( , function($scope, Chats) { 


$scope. ts = Chats.all( 
f 


) 
$scope. remove = function(chat) 4 
Chats. remove( chat) ; 


.controller( , function($scope, $stateParams, Chats) { 
$scope.chat = Chats.get($stateParams.chatId) ; 

}) 

.controLller( , function($scope) { 

$scope. 





By doing this, we have successfully created the WallController controller. However, 
we still have one last step to complete the implementation of our new tab. We need to 
actually create the tab itself using the <ion-tab> element. 
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Creating the tab 


To create our tab, we need to revisit the tabs .htm1 file. Within the file, locate the 
opening <ion-tabs> tag and place the code mentioned in the following code block 
just after that: 


<!-- Wall Tab --> 
<lon-tab title="Wall" icon-off="i0on-ios-compose-outline" icon- 
on="i0n-ios-compose" href="#/tab/wall"> 
<ion-nav-view name="tab-wall"></ion-nav-view> 
</ion-tab> 


If you have done this correctly, your tabs .htm1 file should look like what is shown 
in the following screenshot: 


<ion=—tabs class= 


<10on-tab title= f= Lcon-on= 
<1Lon—nav-view name= ></1On=—naV=-V Leh 
</ion-tab> 


<1on—-tab title= icon-—off= LCon-on= 
<ion-nav-view name ></ Lon—naVv-View> 
</ion—-tab> 


<10n—tab title= icon-of f= 
<i0n—nav-view name= >< /10on—nav—-vLew> 
</ion-tab> 


<1on-tab title= icon-off= icon-on= 
<ion—nav-view name =ef ion=-nav=view> 
</1on—tab> 


</ion-tabs> 





By doing this, we have successfully created a new tab in our application. Let's recap 
what we did to achieve this feat. First, we created a new state definition for our tab 
and referenced it a controller and template file. We then went ahead to create the tab 
itself using the <ion-tab> element, as in the preceding screenshot. 


If you look at the preceding screenshot and pay close attention to <ion-tab> that 
we just replicated from the code block, you will see that its <ion-nav-view> child 
element has a name attribute with the value tab-wal1. This is simply referencing the 
view we defined while defining our tab .wa11 state in our app. js file. These steps 
complete our tabs implementation. 
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Now, the next step is to go on and run our app and see it in action. To do this, simply 
run your application using the ionic serve technique. 


To run your app using the ionic serve technique, simply run ionic 
j 


serve from the root directory of your tab-app application. 


If you have done this correctly, you should see something that closely resembles 
what we have in the following screenshots. 


e  ForiOS: 


This ls A Sample Message Post 


Á i 


Status S Account 





e For Android: 


This Is A Sample Message Post 





[109] 


Building a Simple Social App 


Summary 


In this chapter, we learned about the Ionic tabs application template. We also created 
a tabs application called tabs-app and even got as far as adding a new tab of our 
own. In the next chapter, we will be using this same application to learn how to use 
Firebase to add backend services to our application. 
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Connecting to Firebase 


In this chapter, we are going to focus solely on learning how to use Firebase to 
integrate a backend with our Ionic application. Firebase is a real-time data store 
technology that uses JSON-style database structure to let you store your data in the 
cloud. We will also be using the tabs-app app that we created in Chapter 8, Building 
a Simple Social App, to learn to integrate Firebase into our application. 


Extending our tabs-app Ionic app 
In Chapter 8, Building a Simple Social App, we created tabs-app. If you recall correctly, 
we added a new tab called walls. 


The basic idea we had for the wall tab we added was that it would be like a message 
board where a user could type a post and then tap the button labeled Post to see it on 
the message board, as shown in the following screenshot: 


Android 
Wall 


2 


Wall 





This Is A Sample Message Post 


This Is A Sample Message Post 
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The first thing we need to do is to implement our mechanism to allow users to post, 
as this does not currently work in our tab-app application. 


Implementing the post wall feature 


To recap what we want from our wall tab, we want to be able to enter message in 
the message box, as seen in the preceding screenshot, and have the message appear 
like the sample message post. To begin, we start by implementing the code for 
adding a post in our controller. 


This code is provided in the following code block: 


Sscope.post = { 
message : '! 


he 
Sscope.posts = []; 


S$scope.addPost = function () { 
Sscope.posts.unshift (Sscope.post) ; 


Sscope.post = { 
message: '' 
E 
}7 


You will need to replicate the code provided in the preceding block within your 
WallController controller. This WallController controller can be found within the 
controller.js file of your tabs-app application. The WallController controller 
can be found in the path www/js/controller.js. 


If you have done this correctly, your WallController controller will look like what 
we have in the following screenshot: 
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Let's understand what this code is doing. We are simply attaching a post object to 
the controller. We are also declaring a posts array where all our posts will be stored. 


Lastly, we have a function called addPost () which will add a new post to the posts 
array every time it is fired. 


The next step is to wire this controller into the view of our Wall tab. The markup for 
this view is located in the tab-wall.htm1 file. Now, this file looks like what we have 
in the following screenshot: 


view-tit le= 
Class= 


class= > 
class= > 
class= > 
type= p laceholder= 


> 
on 
Post 


class= > 
< class= > 
This Is A Sample Message Post 





You will need to completely replace the markup found within <ion-content> with 
the markup provided in the following code block: 


<div člass="list">s 
<div class="item item-input-inset"> 
<label class="item-input-wrapper"> 
<input type="text" placeholder="enter your message" 
ng-model="post.message"> 


</label> 
<button class="button button-small" on-tap="addPost()"> 
Post 
</button> 
</div> 


</div> 


<div class="card" ng-repeat="post in posts"> 
<div class="item item-text-wrap"> 
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{{post.message } } 
</div> 


</div> 


If you have done this correctly, your tab-wall.htm1 file will have a markup that 


looks like the following screenshot: 


view-tit Le= 
class= 


class= > 
class= > 
class= > 
type= p Laceho lder= 


> 
< class= on-tap= 
Post 


ng-repeat= 


WALL 
vs Ae | 





ng-mode l= 


> 


By doing this, we have completed the process of implementing and wiring our 
wall post feature on the Wall tab. The next step is to test it using the ionic serve 
technique. Go ahead and run your app using the ionic serve technique and you 


should see your app running in the browser. 


If you try to add a message in the text box found in the wa11 tab and click 
the Post button, you will see a message appear, like what we have in the 


following screenshot: 


Android 


Wall 


and another post 


and another post 


look at a post 


look at a post 
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The backend challenge 


The one problem or challenge we have with our current application is that it does 
not persist. By this, we mean that once we refresh the browser, all our data is gone 
and we have to start again. How cool would it be if we could enter a post and when 
we revisited our app, we could carry on from where we left off just like every other 
message board in other applications? Well, we can achieve this thanks to a great 
technology called Firebase. The first thing we will do is try to understand Firebase 
and what exactly it is. 


Firebase 


Before we begin this chapter, it is very important that we understand the technology 
we are going to be using to integrate our backend. The technology in question is 
called Firebase. Firebase is a technology that lets us store real-time data. Unlike 
traditional backend databases where you need a server running, you do not need to 
have a hosted server with Firebase. 


All you need to get going with Firebase is an active Google account and you are 
good to go. Let's set up a new Firebase account. 


If you do not have a Google account, you can create one by visiting http://www. 
gmail.com. 


Setting up a new Firebase account 


The first thing you need to do to set up your Firebase account is go to the Firebase 
website, which is http://www. firebase.com. 
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You should see a screen that looks like what we have in the following screenshot: 


= Firebase OVERVIEW FEATURES 


Build Extraordinary Apps 


A powertul plattorm for your mobile or web application 


GE 
G Treat movie basi night 
G Hew's your day? 


@ i 
@ aveosome. how soou 
E Greet movie st night! you? 


How's pour dey? 


Qe Bapa. hov about you? 





Once this is done, you should see a button labeled Sign Up With Google on the top 
right-hand corner. 


When you click this button, you should see a Gmail window asking you to select or 
log in to a Google account. After you select the Google account you want to use, you 
should be redirected to your brand new Firebase account. The window you will be 
redirected to should look like what we have in the following screenshot: 


BP bislelerige| 
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_ All the examples we have here are based on our sample account. You 
should not use the URLs from the preceding screenshot but instead use 
ys the ones you see in your own window. If you do not, your sample 
will not work. 


You will see that there is a Firebase app created for you called MY FIRST APP. 
When using Firebase, for each app we create we also create an app for it on our 
Firebase dashboard. This is because Firebase uses a distinct URL to provide you 
access to the data of each unique application you create. So, think of this MY FIRST 
APP Firebase app as a database. 


Now, let's take a closer look at MY FIRST APP: 











FREE 








luminous-inferno-8905.firebaselO.com 


@ Setup Hosting 


Manage App 





You should see something very similar to the preceding screenshot. You can 

access the URL for your Firebase database by clicking on the post fixed with the 

. £irebaseIO.com URL. Remember that the URL you see on the screenshots will be 
different from the ones you see on your dashboard, and you are to use the ones on 
your dashboard. 


You can see that the URL we have here for demonstration is Luminous- 
inferno-8905.firebaselO.com. 


[117] 


Connecting to Firebase 


Click the URL you have on your dashboard and that should take you to your 
Firebase database, which should look similar to the following screenshot: 


E C G Pips: uminous-infermne-8905.lirebasen.com 


=Dashboard  VWewne MY FIRST APP 





Just to clarify once again, Firebase uses URLs to access databases. What you see in 
the preceding screenshot is the dashboard for your database. You can also see the 
same database URL in the browser's address bar. Firebase uses JSON-style data 
structure, so basically what we send to it is JOON, and what we store is JSON too. 


When we add data to our database, we will be able to see it in this dashboard. 


Integrate Firebase into tabs-app application 


Now that we have our Firebase account and know how to get the URL of our 
Firebase database, the next step is to integrate it into our application. 


Adding Firebase and Angular-Fire scripts 

The first thing we need to do is to add the scripts we will need. We will need two 
scripts. The first is the Firebase library. The second script is the Angular-Fire library. 
Angular-Fire is an Angular library that makes working with Firebase in an AngularJS 
application much simpler. 
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The simplest way is to use the hosted library references. To add this to our app, 
open your index.html file and add the following script references within <head> 
of your application: 


<!-- Firebase --> 


<script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></ 
scripts 


<!-- AngularFire --> 


<script 
Ssrc="https:/ /cdn.firebase.com/ libs/angularfire/1.1.3/7 
angularfire.min.js"></script> 


If you have done this correctly, the head part of your index.html should look like 
the following screenshot: 


<head> 
<meta charset= > 
<meta name= content= 
<title></title> 


<Link href= 
<link href= 


<script ></script> 


<script ></script> 


<script ></script> 


<script ></script> 


<script ></script> 

<script ></script> 

<script ></script> 
</head> 





Make sure your references are below the Ionic bundle as seen in the 
NS preceding screenshot. This is very important or else your app will not 
work properly. 


The next step is to reference your Angular-Fire module. This step will ensure that we 
can use Angular-Fire within our application. The name of this module is firebase. 
This will be added to the root module of your application, called starter in your 
app. js file. 


[119] 


Connecting to Firebase 


Currently, this module's declaration looks something like what we have in the 
following screenshot: 


. module ( 





You will need to add the firebase module as a dependent module. Doing this 
will make the module declaration to look something like what we have in the 
following screenshot: 


.module( [ ]) 


You can see that the firebase module is now added to the module declaration as a 
dependency. By doing this, we have successfully integrated Firebase into the skin of 
our app. The next step is to actually implement it to save our data. 


Implementing Firebase to our app 


To implement Firebase in our app, we will need to do some work within our 
WallController controller. The first thing we need to code for is the ability to pull 
items from the database. The second thing we need to code for is the ability to add 
items to the database. 


Pulling from database 

The first thing we need to do is to add the $firebaseArray service dependency into 
our WallController controller. This service is part of the Angular-Fire library and 
makes it easy for us to work with arrays in Firebase. 


Adding the service dependency correctly should make your WallController 
controller definition look like what we have in the following screenshot: 





The next step is to actually write code to pull the data from the database. Replicate 
the code provided in the following code block in your Wal1Controller controller: 


var postsDatabaseRef = new Firebase("https://<YOUR- 
FIREBASE-APP>.firebaseio.com") .child('posts') ; 


var postsData = SfirebaseArray (postsDatabaseRef) ; 
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This piece of code creates a new Firebase reference at first. We passed in the URL of 
the Firebase database that we created earlier. Make sure you change the placeholder 
text (YOUR-FIREBASE-APP) to reflect the URL of your Firebase database. 


After this, we used the $firebase service that we added earlier to create a path 
called postData. The last step we need to do is to allow our app to load data 
from this postData path and use it. To do this, we need to edit the code of our 
Wallcontroller slightly. Currently, our WallController controller's code looks 
like what we have in the following screenshot: 


.controller( , function($scope, $firebaseArray) { 


= $firebaseArray(postsDatabaseRef ) . child( ie 


$scope.addPost = function () { 
$scope. posts. unshift ($scope. post) ; 


$scope. pos { 





Pay close attention to the piece of code highlighted in the preceding screenshot. 

We need to edit this piece of code such that instead of equating to an empty array, 
it should equate to our postData variable. Doing this correctly should make us end 
up with a WallController controller that looks like the following screenshot: 


.controller( , function($scope, $firebaseArray) { 
var postsData = $firebaseArray(postsDatabaseRef ) .child( My 
$scope.post = { 
$scope. ts = postsData;| 


$scope.addPost = function () { 
$scope.posts.unshift($scope. post) ; 


$scope.post = { 
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By doing this, we have implemented the first part; our Firebase implementation and 
our app now loads data from our database. The next step is to implement the code to 
add our posts to our database. 


Adding to database 

Adding to the database is actually pretty easy. All we need to do is slightly edit our 
addPost () function. Currently, our addPost () function looks like what we have in 
the following screenshot: 


$Scope. addi 


$Scope. 


$scope. 


at 
J 
YL 
J 





To make our data persist in our database, we only need to replace the code 
highlighted in the preceding screenshot with the following code block: 


Sscope.posts.Sadd(Sscope.post) ; 


Now, your addPost () function should look like what we have in the 
following screenshot: 


$scope.addPost = yas. 


$SCOpe. 


$scope. 


t 
J 
y 
J 





All we did was just change the unshift () method to the $add() method. 

The $add() method is a method from Firebase that adds items to a Firebase 
database. At this point, we have completed the implementation of our backend. 
As easy as that was, we have a working database in just a few short steps and 
can now test this live. Your final Wall Controller controller should look like the 
following code block: 


.controller('WallController', function($scope, $firebaseArray) { 
var postsDatabaseRef = new Firebase("https://<YOUR-FIREBASE- 
APP>.firebaseio.com") .child('posts') ; 
var postsData = SfirebaseArray (postsDatabaseRef) ; 


Sscope.post = { 
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message : '! 


Sscope.posts = postsData; 


Sscope.addPost = function () { 
Sscope.posts.Sadd(Sscope.post) ; 


Sscope.post = { 
message: '' 
ie 
iy 


}) 


To test your application, simply run your app using the ionic serve technique. 
When you do this, you should be able to enter messages in your application, and 
even after you refresh your browser, the data that you have already posted will still 
exist. Also, if you have a look at the Firebase dashboard for your database, you will 
see that the data you entered in the app is present there. 


Summary 


In this chapter, we learned some really cool ways of using Firebase to easily add a 
backend to our Ionic app. We only touched upon what Firebase lets us do, and you 
can look at the Firebase documentation available at https: //www. firebase.com/ 
docs/ to see the full features of Firebase. 


At this point, we have almost come to the end of our book. The next chapter will 
be the final one, and it is one you should definitely read. It contains some very 
useful information on how to harness skills learned in this book to get even better 
at using Ionic. 
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In this chapter, we are going to have an overview of the important things that we 
haven't covered yet about Ionic and which you might find very useful. You will also 
learn some useful tips about Ionic and discover some great tips about how to make 
even better use of Ionic to develop great apps. 


Uncovered features of Ionic 


Although we covered many great topics in this book, there are a lot of great features 
that we did not cover as they were beyond the scope of this book. We mostly focused 
on the core features of Ionic, such as how to get Ionic set up. We then learned to 
create Ionic apps using the blank, side menu, and tabs templates. We also learned to 
test our Ionic application using the Chrome browser via the ionic serve technique. 


In this section of the book, I will name a couple of things that will be useful for you 
to get to grips with in order to become better at Ionic. 


Appcamp.!O 


Appcamp. IO is a free website created by some of the Ionic staff. It is a place where you 
can go and learn some tips and tricks that will sharpen your Ionic development skills. 
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The content on Appcamp. IO is great for beginners, and it is in some ways in line with 


the philosophy of this book. 


APPCAMP 


Learn mobile development the easy way. 


Jean the hundreds of thousands of other web developers who are becoming experts at 
mobile development, using the skills they already have and the technologies they Love. 


Start learning now - it's free! 





The lonic documentation 


The Ionic documentation page is pretty much the Bible for everything on Ionic. 
Ionic is very well documented and any feature you want to use is provided there 
with the sample code and how to use it. You can access the Ionic documentation at 
http://www. ionicframework.com/docs: 


lonic Documentation 


Start Building with lonic! 


Jum into our docs where you'll find resources that teach you how to usa lonic, and nefenence documentation for all tha moving parts 


PA l 


Overview CSS Components JavaScript 


AE 
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The lonic creator 


This is the drag-and-drop tool built by Ionic for people who want to design their 

first app or people with limited coding skills. Its greatest feature is that anything you 
design by dragging and dropping Ionic elements can be tested in the browser, and the 
code can be extracted as a ready-to-go application. This is great news for designers 
who don't know how to code as they can quickly use the visual drag-and-drop features 
of the Ionic creator to design their apps and pass on the code to seasoned developers. 
You can visit the Ionic creator website at https: //creator.ionic.io. 





The lonic code pen 


Sometimes, even after you have visited the documentation for some component 

of Ionic, you will still want to see a real code sample. Or maybe you want to try to 
reproduce a bug to show others. This is where the Ionic code pen site shines. It is a 
place where you can find some really great implementations of different features 
with the code available for you to learn from. It is also the best way to showcase a 
bug to people who can see it and help you resolve any issues. 
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You can visit the Ionic code pen website at http: //codepen.io/ionic. 





lonic.lO 


The Ionic.IO platform is a complete suite of premium tools that enable you to add 
great services to your Ionic application. With Ionic.IO, you can add things like Push 
Notification, Analytics, and the ability to build your app for the app store in the 
cloud. There is also Ionic deploy, which is a feature that lets you update your app 
live without resubmitting it to the app store. 


At the time of writing this book, the Ionic.IO tools were all in beta, and although they 
were free at the time of writing, Ionic has announced that they will be paid services 
in future. This is something that you should closely follow as you might find yourself 
needing to use some of the services provided by the Ionic.IO platform. 
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You can visit the Ionic.IO platform at http: //www.ionic.io. 


es 
| © | tonic 
h 


One hub for building & 
scaling incredible apps. 


GET STARTED FREE LEARN MORE | 
| 





The lonic playground 

The Ionic playground is a very new and useful tool to quickly bootstrap an idea. 

It is a great way to simply spin off code and have it show you the results right there 
in the browser. I personally see this tool as very useful in the educational world as it 
makes it easy to create Ionic applications with only a browser. 


If you find yourself needing to showcase/demo something quickly without any setup, 
and have a computer close-by, then make sure you give the Ionic playground a try. 
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You can visit the Ionic playground at http: //play.ionic.io/. 


Awesome App 





The lonic community 


One of the chief reasons Ionic is very successful is the fact that it has a strong active 
community. From social media and meetup groups to open source activists, Ionic 
has a wide range of support from people around the world. This means that if you 
do run into problems of any sort, you are never too far from help. With that in mind, 
here are some great links to community elements that you might want to keep an 
eye on: 


¢ The Ionic forum: The Ionic forum really is a great place to voice your troubles 
or find solutions to shared problems. There are multiple active members 
and users who also get motivational badges for contributing to the forum by 
commenting and helping others find solutions. You can access this forum at 
http://forum. ionicframework.com. 


e The Ionic Slack channel: This channel has over 4000 people active on it 24/7 
and in multiple countries. It is a great place to meet people, find work, look for 
help, employ someone, or just simply express yourself. To join the Ionic Slack 
channel, simply request an invitation for free at http: //ionicworldwide. 
herokuapp.com. 


e Twitter: Twitter is the most vibrant social medium when it comes to finding 
the latest and greatest thing about Ionic. If you use Twitter, you can follow 
@ionicframework for more information and updates. 
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The Ionic blog: Ionic writes blog posts very actively about various topics 
relating to using Ionic. Some of these posts could be about critical updates, 
inspirational stories, or even announcements of new products or features. 
You can find the Ionic blog at http: //blog.ionic.io. 


Ionic meetup groups: Around the world, there are hundreds of meetup 
groups autonomously hosting events and meetups. This is a community 
effort by local people to grow Ionic awareness in their locality, and you are 
almost guaranteed to have one in your nearby city. If you do not have one, 
feel free to start your own local meetup. You can find a list of all meetups at 
http: //blog.ionic.io/ionic-worldwide. 


The community around Ionic is pretty much the main reason why it grew so rapidly, 

and you should be sure to trust the community for any needs. As a note, make sure to 
use the skills you have learned from this book to really strive and improve your Ionic 
skills and build some great mobile applications. Remember that nothing is too simple 
to be great and nothing is too great to be too difficult to build. 


Useful resources 


The following are some useful links to some sites and resources that will aid you 
further in your quest to learn more about Ionic: 


The Ionic framework: http://www. ionicframework.com 
The Ionic GitHub: http: //www.github.com/driftyco/ionic 
AngularJS: http: //www.angularjs.org 


Ionic stack overflow: http: //stackoverflow.com/questions/tagged/ 
1onic-framework 


Firebase: http://www. firebase.com 

NodeJS: http: //www.nodejs.org 

Bower: http: //www.bower.io 

Gulp: http: //www.gulpjs.com 

Cordova: https: //cordova.apache.org 

Ionic market: https: //market.ionic.io 

ngCordova: http: //ngcordova.com 

Ionic jobs: http: //jobs.ionic.io 

Ionic showcase: http: //showcase. ionicframework.com 


Ionic lab: http: //lab.ionic.io 
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Summary 


This chapter was a roundup of Ionic and all its features. I hope you will now know 
how to build rich features for your mobile applications and have them possess 
native-like features with the help of Ionic. 
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